javascript - 附加后未删除 jQuery 字段

Question

我遇到了一个问题，我似乎无法让我的 jQuery 脚本在添加字段后删除它们。我尝试了一些更改，但没有任何效果。

$(function() {
  var dataSourceField = $('#sign-up-organization-discovery-source');
  var i = $('#sign-up-organization-discovery-source p').size() + 1;

  $('#sign-up-add-discovery-source').on('click', function() {
    $('<p><label for="discovery-source-field"><input type="text" id="discovery-source-field" size="20" name="discoverySource" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(dataSourceField);
    i++;
    return false;
  });
  $('#remScnt').on('click', function() {
    if (i > 2) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col-md-6 col-md-offset-3">
    <form action="/app/sign-up/organization" method="post">
      <p>{{user.email}}</p>
      <input type="hidden" name="admin" value="{{user.email}}">
      <input type="hidden" name="organizationId">
      <label for="sign-up-organization">Company/Organization Name</label>
      <input type="text" class="form-control" id="sign-up-organization" name="organizationName" value="" placeholder="Company/Organization">
      <a href="#" id="sign-up-add-discovery-source">Add Another Discovery Source</a>
      <div id="sign-up-organization-discovery-source">
        <input type="text" id="discovery-source-field" placeholder="Discovery Source" name="discoverySource">
      </div>
      <br />
      <button type="submit">Submit</button>
    </form>
    <a href="/login">Already have an account? Login here!</a>
  </div>
</div>

Answer 1

这里有几个问题。

• 首先，一个 id应该是独一无二的!您正在复制 id每次附加元素时的属性值。

• 其次，即使您要使用类而不是 id ，它仍然无法按预期工作，因为可点击/可移动 a当您附加事件监听器时，元素在 DOM 中不存在。

您需要在添加元素之后附加事件，或者您可以使用event delegation。并将事件附加到当时存在的公共(public)父元素。

Example Here

$('#sign-up-organization-discovery-source').on('click', '.remove', function() {
   // ...
});

• 我改变了<a href="#" id="remScnt">Remove</a>至:<a href="#" class="remove">Remove</a> .
• 然后我delegated click事件到 #sign-up-organization-discovery-source元素。