如何使用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结束,那么最好是安全的).