为什么我的jquery .on（’change’）不适用于动态添加的选择

我正在动态添加选择元素，如下面的HTML。 我不确定为什么.on（’更改’…）不能用于动态选择。 我错过了什么？

我正在使用Chrome 24.0.1312.57 + jquery 1.8.3。

 $(document).ready(function() { $('#x select').on('change', function () { alert('helo'); }) $('#y select').on('change', function () { alert('helo'); }) $('#x').html($('#y').html()); });  
 
  O1 O2   

Answer 1

你的代码：

 $('#x select').on('change', function () { alert('helo'); }) 

将事件处理程序附加到#x元素内的select。

你想要的东西（从我理解的东西）是这样的：

 $("#y").on('change','select',function () { alert('helo'); }); 

这会将事件处理程序附加到#y元素，该元素将委托给其子元素的“select”元素

来自http://api.jquery.com/on/

.on（）方法将事件处理程序附加到jQuery对象中当前选定的元素集。

Answer 2

事件绑定到初始页面加载时不在DOM中的元素将不起作用。 您需要绑定到存在的DOM上的元素，以允许事件向下流动。 这通常是我采取的方法：

 $(document).on({ change: function() { alert('helo'); } }, '#x select'); $(document).on({ change: function() { alert('helo'); } }, '#y select'); 

我更喜欢它，因为您可以轻松添加后续事件。

 $(document).on({ change: function() { alert('helo'); }, blur: function() { alert('helo'); } }, '#x select'); 

Answer 3

您的事件绑定设置在$（document）.ready（）上。 但是，如果您稍后动态添加它们（例如通过jQuery.appendTo（）等），则新添加的组件需要绑定，因为它们不是$（document）.ready（）中发生的初始组件的一部分。 ，只在加载页面并且最初完成DOM时才运行一次。

Answer 4

正确的语法：

  $('#x').on( 'change', 'select', function () { alert('helo'); } ); 

因此动态元素on()语法似乎如下：

 $(staticParent).on( eventName, target, handler); 

Answer 5

.on（）的重点是，您可以将事件绑定到文档以外的其他内容。 这就是现在折旧的.live（）所做的事情，在大多数情况下都是低效的。 您可以将事件绑定到最不会动态更改的父元素。

据我所知，这是正确的语法：

 $('#x').on('change', 'select', function(){ alert('hello'); }); 

如果要更改#x或#y，请将它们包装在元素上并将事件绑定到该元素。

Answer 6

这很简单。 无论您的目标是什么类别或ID，请尝试更精确但不需要包含超级父母。

错误方式的例子：

  $('#tablecontent').on('change', '#tablecontent > table.CampaignGrid > tbody > tr > td', function(e) { console.log('IN TABLE CONTENT CHANGE'); var value = e.target.value; $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600}); //alert($(ele[0]).html()); }); 

Answer 7

  $('#tablecontent').on('change', '#tablecontent > table.CampaignGrid > tbody > tr > td', function(e) { console.log('IN TABLE CONTENT CHANGE'); var value = e.target.value; $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600}); //alert($(ele[0]).html()); }); 

Answer 8

方括号中的单词是alt文本，如果浏览器无法显示图像，则会显示该文本。 请务必为屏幕阅读软件添加有意义的替代文字。

Answer 9

但是，不要使用.live() / .bind() / .delegate() 。 你应该用。 on() 。

用于静态和动态选择更改

 $(document).on('change', 'select', function (e) { // do something });