javascript - 添加动态元素 onClick 并禁用链接，然后使用可再次单击的链接将其删除

Question

我想用 jQuery 添加一个动态输入元素 onClick 并禁用链接。在删除我刚刚添加的输入元素时，我想让链接再次可点击。

我做了添加元素和禁用链接的第一部分，但问题是当我添加多个元素并尝试只删除一个元素时，所有其他链接都变得可点击。我知道，因为我已经给下 zipper 接上课了。不知道该怎么做才能正常工作。

这是我的代码:

$(document).ready(function() {
  $(".list").on('click', function() {
    $("#blockFeild").append(
      '<div class="row parent">' +
      '<div class="col-md-8">' +
      '<input class="form-control"  type="text">' +
      '</div>' +
      '<button class="btn btn-info" id="editbtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
      '<button class="btn btn-danger" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
      '<br><br>' +
      '</div>'
    ).show();
  });
});

$(document).on('click', 'a.list ', function() {
  $(this).addClass('no-click');
});

$(document).on('click', 'li.block', function() {
  $(this).addClass('not-allowed');
});

$(document).on("click", "#removebtn", function() {
  $(this).closest('.parent').remove();
  $(".block").removeClass("not-allowed");
  $(".list").removeClass("no-click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <?php $users_fields=$ this->db->list_fields('users'); for ($i=0; $i
    <count($users_fields); $i++){ ?>
      <li class="block">
        <a class="list" href="#">
          <?php echo $users_fields[$i]?>
        </a>
      </li>
      <?php } ?>
  </ul>
</div>

Answer 1

您的问题源于重复的 ID(#removebtn，记住 ID 必须是唯一的)以及您的这部分代码:

    $(".block").removeClass("not-allowed");
    $(".list").removeClass("no-click");

这两行分别获取页面上所有类为“not-allowed”和“no-click”的元素，然后删除这些类。这就是为什么删除其中一行会再次启用所有下 zipper 接的原因。

您需要创建一种方法将生成的行仅与用于生成它的链接相关联，可能是通过在行和链接上添加一个标识类。这样，当行被销毁时，您可以使用 jQuery 获取特定的链接元素并重新激活它。