Ajax刷新插入行后ContextMenu失效，如何用jQuery委托函数解决？

这个问题我之前也踩过坑！核心原因就是动态生成的元素（比如你Ajax新增的表格行）没绑定上右键菜单事件——你原来的ContextMenu绑定代码只对页面加载时就存在的<tr>生效，后来通过Ajax插进来的新行根本没被事件覆盖到。

解决办法就是用jQuery的事件委托，把事件绑定到一个始终存在的父元素上（比如你的表格<table>，甚至document），让它监听子元素（也就是动态新增的<tr>）的右键事件。下面分两种常用情况给你具体代码：

情况1：使用官方jQuery ContextMenu插件 #

如果你用的是主流的jQuery ContextMenu插件，其实插件本身就支持通过selector参数实现委托，根本不用自己写复杂绑定：

$(document).ready(function() {
    // 初始化右键菜单，selector指定要绑定的动态元素选择器
    $.contextMenu({
        selector: 'tr', // 这里的<tr>会匹配所有现有和未来新增的行
        trigger: 'right',
        menu: {
            // 自定义你的菜单选项
            edit: {
                name: '编辑',
                callback: function(key, options) {
                    var rowId = $(this).attr('id'); // 获取当前行的ID
                    // 这里写你的编辑逻辑
                }
            },
            delete: {
                name: '删除',
                callback: function(key, options) {
                    var rowId = $(this).attr('id');
                    // 这里写你的删除逻辑
                }
            }
        }
    });
});

这样不管你什么时候通过Ajax新增<tr>，只要符合selector的匹配规则，右键菜单都会自动生效，完全不用在mytablehtml()的done回调里重复绑定！

情况2：手动绑定右键事件（不用插件） #

如果是你自己手写的右键菜单逻辑，那就用jQuery的.on()方法来实现委托：

$(document).ready(function() {
    // 把右键事件绑定到静态父元素（比如你的表格，假设id是myTable）
    $('#myTable').on('contextmenu', 'tr', function(e) {
        // 阻止浏览器默认右键菜单弹出
        e.preventDefault();
        
        // 这里执行你的右键菜单显示逻辑，比如弹出自定义菜单
        console.log('右键点击了行ID：' + $(this).attr('id'));
        
        // 示例：显示提前写好的隐藏菜单
        $('#myCustomContextMenu').css({
            top: e.pageY + 'px',
            left: e.pageX + 'px'
        }).show();
    });
});

这里要注意：尽量绑定到离目标元素最近的静态父元素（比如表格），而不是直接绑定到document，这样性能会更好。

结合你的Ajax代码说明 #

你的mytablehtml()函数里，只要正常生成<tr>插入到表格里就行，不用额外加任何绑定代码——因为上面的委托逻辑已经覆盖了所有动态新增的行：

function mytablehtml() {
    $.ajax({
        type: 'GET', // 建议用GET，除非需要提交数据
        url: 'myurl_form',
        async: true, // 尽量别用async:false，会阻塞页面
        dataType: 'json'
    }).done(function(data) {
        var html = '';
        for (var i = 0; i < data.length; i++) {
            html += '<tr id="' + data[i].id + '"><td>' + data[i].content + '</td></tr>';
        }
        // 把生成的行插入到表格里，比如表格id是myTable
        $('#myTable').html(html);
    });
}

最后提个小建议：尽量把async:false改成true，同步Ajax会让页面卡住，用户体验很差。

内容的提问来源于stack exchange，提问作者Nhoufy