how to add callback function to elements which are added by JQuery

Question

The callbacks functions are not working on the elements which are added by JQuery. Here in my example there is a parent div with class=parent. After clicking on it a <span class="child">Child</span> is being added. But when I am click on the the child it does not alert the message. Please see the example below

    <html>
    <head>
        <style>
            .parent{
                width: 50px;
                height: 30px;
                line-height: 30px;
                background-color: #232323;
                color: #fff;
                text-align: center;
            }

            .child{
                width: 50px;
                height: 30px;
                line-height: 30px;
                background-color: #f3b556;
                color: #232323;
                text-align: center;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <span>Parent</span>
        </div>


        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $('.parent').click(function(){
                alert('parent clicked');
                $(this).after("<span class='child'>child</span>");
            });
            $('.child').click(function(){
                alert('child clicked');
            });
        </script>
    </body>
</html>

You need to use `.on` instead of .click . Look at this answer http://stackoverflow.com/a/1207393/1270865 — cafebabe1991, Aug 12 '16 at 11:00

eisbehr · Accepted Answer · 2016-08-12T12:23:31.970

0

Use a live delegation, because the .child is dynamic added element a normal event listener will not register the click on childs generated in the future.

$("body").on("click", ".child", function(){
    alert('child clicked');
});

edited Aug 12 '16 at 12:23

answered Aug 12 '16 at 10:53

eisbehr

12,243
7
38
63

$(document).on("click",".child",function(){}) works too? – mr. Aug 12 '16 at 10:56
Yes, that would work too. But the best way is to choose the most closest selector, in this example it would be `body`. @mayk – eisbehr Aug 12 '16 at 11:04
Great, it works, thank you so much – Shan Biswas Aug 12 '16 at 11:24
You're welcome, @ShanBiswas! – eisbehr Aug 12 '16 at 11:49
Thanks @eisbehr you are right.always using closest selector should be faster. – mr. Aug 12 '16 at 12:22

score 0 · Answer 2 · answered Aug 12 '16 at 11:02

You can delegate the event from the parent.

When you create a new object, it lacks event listeners that could be added before to other elements with it's same class.

However, if you add the listener to an existing inmutable parent, it will work always:

$("#existingContainer").on("click", ".child", function() {
    //whatever
})

In this way, the event is captured on #existingContainer, but the callback is executed only when it's captured inside a ".child" object that lies inside #existingContainer, no matter if this .child object was added after the event listener was created.

score -1 · Answer 3 · answered Aug 12 '16 at 11:00

As the dom manuplation is occuring, and it passes through to the $('.child').click(function()) function, it did not find any respective element at DOM to manipulate. As you adding this element dynamically, you have to bind/ register the event after dynamically adding the class to register the event to be listen on it. you can do this by

 $('.parent').click(function(){
                alert('parent clicked');
                $(this).after("<span class='child' onclick='ChildelementClick()'>child</span>");
            });
function ChildelementClick(){
// do somehing
}

Or you can use the example given by @eisbehr

how to add callback function to elements which are added by JQuery

3 Answers3