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元素

1 个答案: