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

Question

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

5

我的问题是，我的点击回调函数只能运行一次，这可能与第一个回调之后，我的页面上的某些部分将通过ajax操作进行刷新有关。但是，我该如何将事件重新附加到新加载的DOM元素上？

这是我的函数：

// 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;
        });
    });

- Marten Zander

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gone Coding · Accepted Answer

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

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

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

这意味着匹配的元素不需要在事件注册时间存在，只需要在事件发生时存在，因此非常适合动态更改的项目。

document是默认值，如果没有更接近变化元素的位置。绝不要将body用作委派鼠标事件的默认值，因为样式可能导致它无法响应鼠标事件（如果其计算高度为0，则最好保持安全）。