Question

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

＆＃13;

$(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;
  });
});

＆＃13;

<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>

＆＃13;

Answer 1

这里有几个问题。

首先，假设id是唯一的！每次附加元素时，您都会复制id个属性值。
其次，即使您使用的是课程而不是id，它仍然无法按预期工作，因为可点击/可移动的a元素并非如此。当你附加事件监听器时，它存在于DOM中。

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

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元素。

Answer 2

$('##sign-up-organization-discovery-source').on('click', '#remScnt', function() {
    if (i > 2) {
        $(this).parents('p').remove();
        i--;
    }
    return false;
});

附加后没有删除jQuery字段

2 个答案: