javascript - 将 移动到另一个列表需要更新点击监听器

Question

请参阅此处的示例:https://jsfiddle.net/06bf3w2c/1/

我有两个<ul> s。单击第二个项目中的某个项目会将该项目移动到第一个项目。

在第一个列表中每个 <li>包含 <span>与类(class)delete-btn 。当单击此范围时，它应该从列表中删除该项目。

除非您将项目从第二个列表移动到第一个列表，然后尝试将其删除，否则此操作正常。一旦移动项目的删除 btn 范围被单击，它似乎仍在为第二个列表注册单击监听器，即使它不再位于第二个列表中。

我的点击监听器是这样应用的:

$(".second li").click(function(){
  $(".first").append($(this).append(' <span class="delete-btn">[ X ]</span>'));
});

移动 li 并单击删除 btn 范围后，它会调用此单击监听器，即使 <li>不再是 second 的继承人类。

当我移动 <li> 时如何更新点击监听器从第二个列表到第一个列表，以便删除按钮监听器在项目移动后起作用。

Answer 1

那是因为您将点击监听器附加到 li 本身。当 li 被移动时，它仍然具有单击事件监听器并且只是复制自身。您应该将事件监听器附加到列表，并让它监听子 li 上的点击，如下所示:

$(".second").on('click', 'li', function(){
  $(".first").append($(this).append(' <span class="delete-btn">[ X ]</span>'));
});

$(".first").on('click', '.delete-btn', function(){
  $(this).parent().remove();
});

ul{
  float: left;
}

.second li{
  background-color: #BABABA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="first">
<li>item 1 <span class="delete-btn">[ X ]</span></li>
<li>item 2 <span class="delete-btn">[ X ]</span></li>
</ul>

<ul class="second">
<li>item 3</li>
<li>item 4</li>
</ul>