Question

有人能告诉我为什么声明的函数不适用于append（）方法创建的元素？它可以与元素一起使用，但是，当使用上述函数对另一个元素进行处理时，该动作不会触发吗？

使用函数$(".notification-close").click(function(){关闭info_box var containg div，但是当使用append（）方法创建框时，它不再起作用。

    $(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

尝试使用delegate或on。您当前的代码无效，因为页面加载时附加的内容不存在。

Answer 2

在绑定事件处理程序时，DOM中不存在动态元素，因此您必须将事件处理程序绑定到实际存在的元素，也称为委托事件处理程序：

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

jQuery附加元素函数

2 个答案: