appenTo后jQuery点击事件丢失

Question

I am using appendTo to move list items between two list, upon a button click. The button resides in each li element. Each li has two buttons, of which only one is visible at a time, depending on the list the li currently resides.

Here is the function:

// 'this' is the first list
// Click Handler for remove and add buttons
$(this.selector + ', ' + settings.target + ' li button').click(function(e) {

    var button = $(e.target);
    var listItem = button.parent('li');

    listItem.children("button").toggleClass("hidden");

    if (button.hasClass("assign")) {
        // Add Element to assignment list
        listItem.appendTo(settings.target);
    }
    else
        if (button.hasClass("remove")) {
            // Remove Element from assignment list
            listItem.appendTo(source);
        }
})

As long as the list item reside in the original li, the click events in the buttons are triggered. However, once it is moved to the other list using listItem.apendTo . The click item no longer fires. Why is this the case? I cant find anything about this in the docs.

Answer 1

Sometimes jQuery won't be able to find something if it isn't present in the DOM when your script first loads. If it is a dynamically created element, try replacing your click event handlers with 'on'

Rather than:

$(".aClass").click(function(){
    // Code here
})

Try:

$("body").on("click", ".aClass", function(){
    Code here
})

http://api.jquery.com/on/

Answer 2

As recommended by user 'apsdehal', a deleate was what i needed:

// Click Handler for remove and add buttons
    $(source.selector + ', ' + settings.target ).delegate("li button", "click", function(e) {

        var button = $(e.target);
        var listItem = button.parent('li');

        listItem.children("button").toggleClass("hidden");

        if (button.hasClass("assign")) {
            // Add Element to assignment list
            listItem.appendTo(settings.target);
        }
        else
        if (button.hasClass("remove")) {
            // Remove Element from assignment list
            listItem.appendTo(source);

        }

    });

Answer 3

You should use on event.

$(".aClass").on("click",  function(){
    //Your custom code
})

on event is usful for Dynamically generated data + static data already in HTML.