23

我正在动态添加选择元素，如下面的 HTML 所示。我不确定为什么 .on('change' ...) 不适用于动态选择。我错过了什么？

我正在使用 Chrome 24.0.1312.57 + jquery 1.8.3。

<script type="text/javascript">
  $(document).ready(function() {
      $('#x select').on('change', function () { alert('helo'); })
      $('#y select').on('change', function () { alert('helo'); })

      $('#x').html($('#y').html());
  });
</script>

<div id="x"></div>
<div id="y">
    <select>
        <option>O1</option>
        <option>O2</option>
    </select>
</div>
4

10 回答 10

39

你的代码：

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

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

你想要的（据我所知）是这样的：

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

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

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

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

于 2013-02-18T17:41:29.977 回答
14

事件绑定到初始页面加载时不在 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');
于 2013-02-18T17:38:41.683 回答
6

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

对于静态和动态选择更改

$(document).on('change', 'select', function (e) {
    // do something 
});
于 2017-03-14T06:48:08.257 回答
3

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

于 2013-02-18T17:38:41.327 回答
1

正确的语法：

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

on()所以动态元素的语法似乎是：

$(staticParent).on( eventName, target, handler);
于 2013-02-18T17:35:06.953 回答
1

.on() 的全部意义在于您可以将事件绑定到文档以外的其他内容。这就是现在贬值的 .live() 所做的，并且在大多数情况下效率低下。您需要将事件绑定到最近的不会动态更改的父元素。

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

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

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

于 2013-02-18T17:40:48.600 回答
1

这很简单。无论您的目标是什么类别或 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());
        });

正确方法：

        $('#tablecontent').on('change', '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());
        });

请注意，我删除了超级父级：'#tablecontent'

这一切都与清晰度有关。

  • 五
于 2015-09-01T17:45:08.840 回答
1 

        $('#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());
        });

        $('#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());
        });

        $('#tablecontent').on('change', '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());
        });

        $('#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());
        });

于 2015-11-21T09:59:02.387 回答
1

方括号中的单词是替代文本，如果浏览器无法显示图像，则会显示该文本。确保为屏幕阅读软件包含有意义的替代文本。

于 2015-11-21T10:02:14.100 回答
0

遇到了这个问题，因为我无法获得动态创建的选择，这些选择是从具有动态 id 的 ajax 帖子返回的，以触发事件。

$(document).on('change', 'select', function (e) {
    $("#theDiv select").on("change",function(){ post("SelectChanged");} );
});

这在我先改变一些东西之前是行不通的，所以我添加了

$("#theDiv select").on("change",function(){ post("SelectChanged");} );

但这并不意味着，在更改之后，所有其他更改都会触发两次。这可能不是很好的做法。但我所做的是放入一个在开始时调用的函数，并且每次返回 ajax。

 `function myFuncs(){
    $('#theDiv select').unbind('change');
    $('#theDiv select').on('change' function(){ post('selectChanged'); });
  }`

但是必须在每个函数调用开始时解除绑定，否则每次都会使函数加倍。我确信必须有一个正确的方法来做到这一点，我只是还没有找到它。感谢您开始提问。

于 2020-05-06T15:59:16.913 回答