Bootstrap模态框中jQuery on事件带选择器参数失效问题咨询

你遇到的问题核心是jQuery事件委托的逻辑搞反了，咱们一步步拆解：

为什么原代码不生效？ #

你的绑定代码是：

$('#select_search').on('change', '#parent_row', function(){ alert("Select a county first"); });

这里的逻辑错误在于：on()方法的第二个参数是**「需要监听事件的后代元素选择器」——也就是说，你得把事件绑定在祖先元素**上，然后指定它的某个后代元素作为事件触发目标。但你现在把绑定对象设为#select_search（子元素），第二个参数却是它的父元素#parent_row，父元素不可能是子元素的后代，所以事件永远不会被触发。

而你去掉第二个参数后，代码变成了直接给#select_search绑定change事件，这属于直接事件绑定，只要元素存在于DOM中，就能正常触发，所以生效了。

针对你的场景的正确写法 #

结合你使用Bootstrap模态框的情况，分两种场景处理：

1. 静态元素直接绑定（模态框加载完成后元素已存在）

如果#select_search是模态框初始化后就存在的静态元素，直接绑定事件即可（就是你去掉第二个参数后的写法）：

$('#select_search').on('change', function(){ 
    alert("Select a county first"); 
});

2. 动态元素事件委托（元素是动态生成的）

如果#select_search是模态框弹出后才动态生成的，那就需要用事件委托，把事件绑定在静态的祖先元素上（比如#parent_row，或者更上层的document，因为模态框是动态插入DOM的，#parent_row如果是模态框的一部分，可能也是动态的，这时候用document更稳妥）：

// 用父元素#parent_row做委托（前提是#parent_row在页面加载时就存在，或在模态框初始化后存在）
$('#parent_row').on('change', '#select_search', function(){ 
    alert("Select a county first"); 
});

// 或者用document做全局委托（兼容动态生成的模态框元素）
$(document).on('change', '#select_search', function(){ 
    alert("Select a county first"); 
});

补充说明 #

Bootstrap模态框的元素默认是动态插入到body中的，如果你在模态框初始化之前就绑定事件，直接绑定可能会失败，这时候使用事件委托（绑定在document或body上）是更稳妥的方案。

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