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

Question

It's a long story. Please bear with me till the end. I have two parent divs #c1 and #c2 (there are actually 5, just for the sake of example). Both have some child divs. Each clild div has a delete div which on being clicked deletes that particular child div and the first child div from #c2 takes it's place (Just like a queue. Where a if person leaves, others behind him move forward).

HTML looks like this:

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

Now when 'a' or 'b' or 'c' is deleted then 'd', 'e' and 'f' move one place up. So now '#c1' has a,b and d and '#c2' has e and f.

Here is my jquery code :

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

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

This works perfectly fine untill I try to delete the moved up 'd'. When I try to delete 'd' it deletes but the child divs are not moving up.

Any help. Thanks for bearing with me all along.

Answer 1

The problem is that $("#c1 .delete").click(...) is going to select the initial divs and attach the click handler to them; it's not going to attach a click handler to any arbitrary div that will eventually be under #c1 . You can use event delegation to solve this:

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

This will just attach an event handler to #c1 that handles any clicks from descendant div.delete , even those that will be added later on.

Answer 2

There are 2 errors in the following block of code

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

It should be like this:

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

The delete function will work on on the existing items. For all new itesm you should use on.

So the code should be like this:

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

Also, you can combine both the code into just one block instead of using 2 different blocks. I have created a sample jsfiddle with a working code.