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

stackoverflow.com/a/16033998

Aniket Kulkarni
– Aniket Kulkarni

2013-09-02 06:54:13 +00:00
Commented Sep 2, 2013 at 6:54 — Aniket Kulkarni
– Aniket Kulkarni, Commented Sep 2, 2013 at 6:54

Sudhir Bastakoti · Accepted Answer · 2013-09-02 06:54:50Z

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 2, 2013 at 6:54

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2013-09-02 06:53:12Z

1

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.

answered Sep 2, 2013 at 6:53

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Xyzk Over a year ago

It worked. Could you plese explain why previous options did not work?

Kanishka Panamaldeniya · Accepted Answer · 2013-09-02 06:56:15Z

0

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

answered Sep 2, 2013 at 6:56

Kanishka Panamaldeniya

17.6k31 gold badges128 silver badges195 bronze badges

Collectives™ on Stack Overflow

Cannot launch script on dynamically added element

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related