如何通过name属性使jQuery事件生效？动态绑定代码失效排查

问题分析 #

你的代码里出现两种写法效果不同的情况，主要有两个核心原因：

1. 选择器特殊字符未转义
   当你用固定字符串input[name='ext_col_02[0][]']时，jQuery能正确识别这是属性值里的[]；但通过变量拼接时，name变量里的[0]和后续添加的[]会被jQuery当成选择器的特殊语法（比如属性过滤的符号），导致选择器无法匹配到目标元素。

2. 事件绑定时机错误
   在fillData函数中，你先尝试绑定change事件，之后才通过append把input元素添加到DOM中。直接用.change()绑定事件只会作用于绑定时刻已存在于DOM中的元素，后续动态添加的元素不会继承这个事件绑定。

解决方案 #

针对这两个问题，给出两种可行的修复方式：

方案1：转义选择器中的特殊字符 + 调整绑定时机

先对变量里的特殊字符进行转义，然后确保在元素添加到DOM之后再绑定事件：

function fillData(data, select_id) {
    j$(select_id).children().remove();
    var name = j$(select_id).attr('name');
    name = name + "[]";
    // 转义选择器中的特殊字符：[ 和 ]
    var escapedName = name.replace(/([\[\]])/g, '\\$1');
    
    if(display_checkbox){
        // 先添加元素到DOM
        j$.each(data, function(key, value){
            j$(select_id).append('<input type="checkbox" name="' + name + '" ... />');
        });
        // 再绑定事件
        j$( "input[name='"+escapedName+"']" ).change(function() { 
            console.log("I am called!"); 
        });
    }
}

方案2：使用事件委托（推荐）

事件委托可以避免绑定时机和选择器转义的问题，直接把事件绑定到父元素上，监听动态添加的子元素事件：

function fillData(data, select_id) {
    var $parent = j$(select_id);
    $parent.children().remove();
    var name = $parent.attr('name') + "[]";
    
    if(display_checkbox){
        // 先添加元素
        j$.each(data, function(key, value){
            $parent.append('<input type="checkbox" name="' + name + '" ... />');
        });
        // 使用事件委托绑定到父元素
        $parent.on('change', "input[name='"+name.replace(/([\[\]])/g, '\\$1')+"']", function() {
            console.log("I am called!");
        });
        // 如果父元素是固定存在的，也可以把事件委托绑定到更上层的静态元素（比如document）
        // j$(document).on('change', select_id + " input[name='"+escapedName+"']", function() { ... });
    }
}

额外说明 #

• 事件委托是处理动态元素事件的最佳实践，因为它不需要每次添加元素都重新绑定事件，性能更优。
• 转义特殊字符时，正则表达式/([\[\]])/g会匹配所有的[和]，并用\\转义它们，确保jQuery选择器能正确识别属性值。

内容的提问来源于stack exchange，提问作者om raj purohit