Question

这是一个很长的故事。请耐心等到最后。我有两个父div＃c1和＃c2（实际上有5个，仅仅是为了举例）。两者都有一些儿童div。每个clild div都有一个delete div，点击后会删除那个特定的子div，而＃c2的第一个子div就会占据它的位置（就像一个队列。如果一个人离开，其他人就会前进）。

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。您可以使用事件委派来解决此问题：

$('#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的任何点击，即使是稍后会添加的点击。

Answer 2

以下代码块中有2个错误

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

应该是这样的：

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

删除功能将对现有项目起作用。对于所有新的itesm你应该使用。

所以代码应该是这样的：

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

此外，您可以将代码组合到一个块中，而不是使用2个不同的块。我创建了一个带有工作代码的示例jsfiddle。

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

2 个答案: