求助：jQuery delegate函数仅部分生效（AJAX加载表格行场景）

嗨，我完全懂你碰到的这个坑！之前静态表格里用ZimSystem的代码能正常跑，但AJAX动态加载的行就失效，这种动态元素的事件绑定问题确实很常见。

首先得说一句：别再用delegate()啦，jQuery从1.7版本开始就推荐用.on()方法来统一处理所有事件绑定，包括动态元素的事件委托，而且.on()的写法更清晰，兼容性也更好。

正确的事件委托写法 #

针对你#myRecords这个tbody里动态生成的下拉菜单，你可以把事件绑定到已经存在的父元素（也就是#myRecords本身，因为它是页面加载时就有的），然后指定目标下拉菜单的选择器。假设你的下拉菜单class是.table-dropdown，代码应该是这样：

$('#myRecords').on('change', '.table-dropdown', function() {
    // 这里放原来ZimSystem代码里的下拉逻辑
    var selectedVal = $(this).val();
    // 比如联动其他下拉、更新数据之类的操作都写在这儿
    console.log('当前选中值：', selectedVal);
});

为什么你的delegate()只部分生效？ #

大概率是这几个原因：

• 事件类型不匹配：比如原来的代码监听的是click，但你用delegate()绑了change，或者反过来
• 目标选择器写错了：动态生成的下拉菜单的class/id和静态页面的不一样，比如静态的是.select-menu，动态生成的却是.ajax-select
• 父元素选择范围不对：比如你把事件绑在了tr上，但tr本身也是动态生成的，那委托肯定失效，必须绑在页面加载时就存在的父元素上

额外要注意的细节 #

1. 先确认AJAX加载后，下拉菜单的元素确实带有你指定的选择器，用浏览器F12的元素检查工具看看，别写错了class名
2. 如果下拉菜单有联动逻辑（比如选第一个下拉，第二个下拉的选项跟着变），记得在AJAX的success回调里重新初始化逻辑，比如：

$.ajax({
    url: '你的接口地址',
    success: function(res) {
        // 把动态生成的tr添加到tbody
        $('#myRecords').append(res.htmlContent);
        // 调用初始化下拉联动的函数
        setupDropdownRelations();
    }
});

// 封装下拉联动逻辑
function setupDropdownRelations() {
    $('#myRecords .table-dropdown').each(function() {
        // 比如设置默认选中值、禁用某些选项之类的操作
    });
}

这样调整之后，动态加载的行里的下拉菜单应该就能正常触发事件啦！

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