Question

I have a code like this

$(document).ready(function(){
     $(".add").bind ('click',
        function ()
        {
            $('.main').append('<div class="add">Add element 2</div>');
        });
    });
</script>

<div class="main"><div class="add">Add element</div></div>

When virtual objects “.add” are appended to “.main”, jquery does not react for click on them

Answer 1

Yes, because you bound the action to only existing .add elements before you created the new ones.

You need to bind the click to the .main element with a specific selector provided as the second parameter in the on function.

$('.main').on('click', '.add', function (){
    $('.main').append('<div class="add">Add element 2</div>');
});

It’s pretty intuitive really. With your code, you’re saying find all add elements on the page and bind this function to each one. The ones added later therefore won’t have this function bound.

With the correct code, you’re saying find the main element and bind a function to it, but only execute the function when a child element with the class .add is clicked.