如何使用 ajax 将事件重新附加到新加载的 DOM 元素

Question

我的问题是我的点击回调函数只工作一次，这可能与以下事实有关：在第一次回调之后，我的部分页面将通过 ajax 操作刷新。但是我怎样才能将事件重新附加到新加载的 DOM-Elements？

这是我的职能：

// DELETE ENTRY
    $('.delete').on('click', function(){
        //// ADDING DATA-INDEX TO ENTRIES ////

        $('.id').each(function(index){
            var id = $(this).html();
            var dataIndex = $(this).attr("data-index", id);
        });

        alert('clicked');

        var action = '_includes/deleteEntry.php';
        var method = 'post';
        var entryId = $(this).siblings('.id').attr('data-index');
        var entryIdNumber = entryId.substr(entryId.length - 2);

        var data = {'id' : entryIdNumber};

        $.ajax({
            url: action,
            type: method,
            data: data

        }).done(function(data){
            $('.main').empty();
            $('.main').append(data);
            return;
        });
    });

Answer 1

使用附加到不变祖先的委托事件处理程序：

$(document).on('click', '.delete', function(){

这通过监听一个事件（点击）来冒泡到祖先，然后它应用jQuery选择器，然后它将函数应用于任何匹配元素 导致事件 。它还只将单个处理程序连接到单个元素，因此通常启动速度更快（如果您有多个匹配项）。委托处理程序在事件时间添加的微小延迟将永远不会被注意到，因为您根本无法快速单击 :)

这样做的结果是匹配元素不需要在事件注册时间存在，就在事件发生的时候存在，因此它非常适合动态变化的项目。

如果没有其他更接近变化的元素，

document 是默认值。永远不要使用 body 作为委托鼠标事件的默认值，因为样式会导致它不响应鼠标事件（如果它最终计算出的高度为 0，那么最好是安全的）。

如何使用 ajax 将事件重新附加到新加载的 DOM 元素

How do I reattach an event to a new loaded DOM element with ajax

ajax

jquery

event-handling