Question

以下代码通过ajax将数据添加到容器#section：

$(".btnGetImages").click(function(event){
    event.preventDefault();

    // get id of article
    var id = $(this).attr('data-id');

    // get images via ajax
    $.ajax({
        url: "includes/get_images.php",
        type: "get",
        data: {article:id},
        success: function(data) {
            // insert data into container
            $("#section").html(data);
        },
        error:function() {
            $("#section").html('show error msg here...');
        }
    });
});

在容器#section内部，有一个我想点击的类.thumb的元素。出于某种原因，即使我正确地添加了.on事件，点击也不会触发。为什么呢？

$(".thumb").on("click", function(event) {
    alert('yo, im a thumb...');

    event.preventDefault();
});

Answer 1

因为它们是动态创建的，所以您需要使用event delegation。使用'#section'作为选择器，因为它比使用document更有效：

$("#section").on("click", ".thumb", function(event) {
    event.preventDefault();
    alert('yo, im a thumb...');
});

Answer 2

因为您需要将任何事件处理程序重新应用于任何动态生成的代码。

function foo() {
    alert('foo');
}

$('body').html('<p>something in here</p>');
$('body p').on('click', foo);

最好的方法是预先定义一个函数，然后将其指定为事件处理程序。加载jQuery时，它会运行HTML代码并将任何已定义的事件处理程序分配给存在的任何HTML代码。如果您添加到文档中，则事件侦听器不存在，因此您需要重新应用它们。

.on（）处理程序不处理用.html（）创建的元素，为什么？

2 个答案: