CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Christian Loock
Christian Loock

Reputation: 154

jQuery click event lost after appenTo

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.

Upvotes: 2

Views: 1435

Answers (3)

Pratik Joshi
Pratik Joshi

Reputation: 11693

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.

Upvotes: 1

Christian Loock
Christian Loock

Reputation: 154

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

        }

    });

Upvotes: 0

Djave
Djave

Reputation: 9329

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/

Upvotes: 3

Related Questions