Question

Can someone tell me why the declared function does not apply to the elements created by append() method? It does work fine with the element but, when another element is aded using the mentioned function, the action does not fire?

The info_box var containg div closes using the function $(".notification-close").click(function(){ but when the box is created using the append() method, it does not work anymore.

    $(document).ready(function () {

//setTimeout(function(){$(".notification-box").fadeOut("slow");}, 6000);
$(".notification-close").click(function(){
    $(".notification-box").fadeOut("slow");return false;
});


// AJAX
$(".lightbox_delete_button").easyconfirm({locale: { title: 'Delete', button: ['No','Yes']}});

$(".lightbox_delete_button").click(function () {

var pictid_lightbox = $(this).parent().find('#pictid_lightbox').val();
var thumb_container = $(this).parents('.thumb_container');
var tools_counter = $('body').find('#tools_lightbox_count').text();
var reduced_tools_counter = parseInt(tools_counter)-1;
var info_box = "<div class=\"notification-box notification-box-info\"><p>You don't have any images in your lightbox</p><a href=\"#\" class=\"notification-close notification-close-info\">x</a></div>";
$.ajax({
            url: "ajax.html",
            type: "POST",
            async:false,
            data: ({f:"test_ajax",pictid_lightbox:pictid_lightbox}),
            success: function(data){
            alert(data);
thumb_container.fadeOut("slow");
$($('body').find('#tools_lightbox_count')).replaceWith('<span id=\"tools_lightbox_count\">' + reduced_tools_counter.toString() + '</span>');
if(reduced_tools_counter == 0){
$('body').find('#center_column').append(info_box);
}else{
alert('not empty');
}
            }
});

return false;
});


});

Answer 1

Dynamic elements does’nt exist in the DOM at the time you’re binding the event handler, so you’ll have to bind the event handler to an element that actually exists, also called a delegated event handler:

$('#center_column').on('click', '.notification-close', function(){
     $(".notification-box").fadeOut("slow");
});