ajax调用更新DOM后，jQuery on click事件丢失

jQuery on click event is lost after DOM updated by ajax call

本文关键字：click on 事件 jQuery 调用 更新 DOM ajax      更新时间：2023-09-26

我有一些工作要做，但由于我不太习惯用JS编码，我不知道这是否是正确的方法。

我有一个简单的：

<div class="offers"></div>

通过调用myUrl，我检索准备使用的HTML（一些.offerdiv），然后将其append转换为.offersdiv。但我想在这些新添加的.offer 上有一个点击事件

$.ajax({
    'url': myUrl,
    success: function(data){
        offers.append(data);
        $('.offer').on('click', function(e) {
            e.preventDefault();
            $('.offers .offer').removeClass('selected');
            $(this).addClass('selected');
        });
    }
});

感谢您的专业知识！

您可以简单地尝试：

$(document).on('click', '.offers .offer', function(e) {
    // Code here
});

理想情况下，出于性能目的，用DOM上最接近的ID替换文档。

更新：在a.Wolff发表评论后，我删除了此处不需要的"document.ready"。（请阅读评论）。

将事件处理程序放在ajax之外：

$.ajax({
    'url': myUrl
}).done(function(data){
    var offers = $('.offers');
    offers.append(data);
});
$('.offers').on('click','.offer' function(e) {
   e.preventDefault();
   $('.offers').find('.offer').removeClass('selected');
   $(this).addClass('selected');
});
相关文章：