javascript - jQuery 如何刷新附加的 div 的特征？

Question

说来话长。请耐心等待我到最后。我有两个父 div #c1 和 #c2(实际上有 5 个，只是为了举例)。两者都有一些子 div。每个 clid div 都有一个删除 div，单击它会删除该特定的子 div，#c2 中的第一个子 div 将取代它(就像队列一样。if 人离开的地方，他后面的其他人继续前进)。

HTML 看起来像这样:

<div id="c1">
    <div class="a"><div class="delete"></div></div>
    <div class="b"><div class="delete"></div></div>
    <div class="c"><div class="delete"></div></div>
</div>

<div id="c2">
    <div class="d"><div class="delete"></div></div>
    <div class="e"><div class="delete"></div></div>
    <div class="f"><div class="delete"></div></div>
</div>

现在，当“a”或“b”或“c”被删除时，“d”、“e”和“f”向上移动一位。所以现在 '#c1' 有 a、b 和 d，'#c2' 有 e 和 f。

这是我的 jquery 代码:

 $(".delete").click(function() {
 $(this).parent().remove();
 });    

$("#c1 .delete").click(function() {         
    if ($("#c1>div").length<3) {
        $("#c2>div:nth-child(1)").appendTo("#c1");
    }
});

在我尝试删除向上移动的“d”之前，它工作得很好。当我尝试删除“d”时，它会删除，但子 div 不会向上移动。

任何帮助。谢谢你一直陪着我。

Answer 1

问题是 $("#c1 .delete").click(...) 将选择初始 div 并将点击处理程序附加到它们；它不会将点击处理程序附加到最终位于 #c1 下的任意 div。您可以使用事件委托(delegate)来解决这个问题:

$('#c1').on('click', '.delete', function(e) {
    $(e.target).parent().remove();
    if ($("#c1>div").length < 3) {
        $("#c2>div:nth-child(1)").appendTo("#c1");
    }
});

这只会将一个事件处理程序附加到 #c1 以处理来自后代 div.delete 的任何点击，即使是那些稍后将添加的点击。