Cannot launch script on dynamically added element

Question

This is pretty much the same problem as in here: Click event doesn't work on dynamically generated elements , but that post was a few years old, and it's solution did not work for me.

I have a small image carousel, which works properly when I add it directly to html, but when I add it dynamically the jQuery click event for buttons does not work. I tried changing from button.click() to button.on("click,function(){}) but it still doesn't work. Can someone tell me a) How to make it work b) How does modyfying DOM affects jQuery execution, so I understand it better in the future (for example, are there some DOM element jquery ignores?)

my code:

$(document).ready(function(){
    $(".carousel-button-left").on('click',function(){
    var $ul=$(this).next().find(".carouselUl");;
    //alert(""+$ul.html());
    var $lastchild=$ul.children().last();
    $ul.prepend($lastchild);
    });
});


$(document).ready(function(){
    $(".carousel-button-right").on("click",function(){
    var $ul=$(this).prev().find(".carouselUl");
    //alert(""+$ul.html());
    var $firstchild=$ul.children().first();
    $ul.append($firstchild);
    });
});

http://stackoverflow.com/a/16033998 – Aniket Kulkarni Sep 02 '13 at 06:54 — Aniket Kulkarni, Sep 02 '13 at 06:54

score 3 · Answer 1 · answered Sep 02 '13 at 06:54

3

try changing:

$(".carousel-button-left").on('click',function(){
...

to

$(document).on('click', '.carousel-button-left', function(){
...

so that jQuery receives the event and delegates it the element that matches the selector provided as argument.

answered Sep 02 '13 at 06:54

Sudhir Bastakoti

99,167
15
158
162

score 1 · Accepted Answer · answered Sep 02 '13 at 06:53

use event delegation for registering handlers for dynamically added elements.

Just using .on() does not make the event registration delegation based, the parameter and the element to which the handler is attached is important

$(document).ready(function () {
    $(document).on('click', ".carousel-button-left", function () {
        var $ul = $(this).next().find(".carouselUl");;
        //alert(""+$ul.html());
        var $lastchild = $ul.children().last();
        $ul.prepend($lastchild);
    });
});

$(document).ready(function () {
    $(document).on("click", ".carousel-button-right", function () {
        var $ul = $(this).prev().find(".carouselUl");
        //alert(""+$ul.html());
        var $firstchild = $ul.children().first();
        $ul.append($firstchild);
    });
});

the set of elements on which the handler is added(LHS of .on() call) should be present in the dom when the script is executed, then we need to use a second parameter in the .on() call to specify the target element selector which are present under the LHS elements.

It worked. Could you plese explain why previous options did not work? — Xyzk, Sep 02 '13 at 06:55

score 0 · Answer 3 · answered Sep 02 '13 at 06:56

try

$(document).ready(function(){
    $(document).on('click',".carousel-button-left",function(){
    var $ul=$(this).next().find(".carouselUl");;
    //alert(""+$ul.html());
    var $lastchild=$ul.children().last();
    $ul.prepend($lastchild);
    });
});


$(document).ready(function(){
    $(document).on("click",".carousel-button-right",function(){
    var $ul=$(this).prev().find(".carouselUl");
    //alert(""+$ul.html());
    var $firstchild=$ul.children().first();
    $ul.append($firstchild);
    });
});

Cannot launch script on dynamically added element

3 Answers3