触发通过 ajax 加载的 <option> 的更改答案

【问题标题】：Triggering the change of a <option> that is loaded via ajax触发通过 ajax 加载的 <option> 的更改
【发布时间】：2014-07-05 23:31:46
【问题描述】：

我很难让一个简单的事件触发与 jquery 一起工作。我正在使用 jquery 1.9.1 并且不打算降级。我缺少的一件事是.live() 方法，该方法现在内置在.delegate() 函数中。这是我想做的：

我有一些通过 AJAX 加载到我的页面中的 DOM，它看起来如下：

    <select id="equip_new">
        <option value="1">Text 1</option>
        <option value="2">Text 2</option>
    </select>

现在我想触发新加载的选定选项的.change() 函数。在旧的 jquery 中我会使用

    $('#equip_new').live('change', function(){
        alert(1);
    });

现在我需要使用 .delegate() 但它不会触发任何东西。我的代码如下所示：

    $('#equip_new').delegate('option', 'change', function(){
        alert(1);
    });

但它不起作用。

在更改通过 AJAX 加载到 DOM 的选择框中的选项时如何正确使用委托来触发代码的任何想法？

编辑：我只是想通了，但想给其他人提示：

您必须在 AJAX 加载内容上方的现有元素上调用 .delegate() 方法。例如 $('body')

我的事件处理程序绑定或委托也是错误的。我做了如下代码：

    $('body').delegate('#equip_new', 'change', function(){
        alert(1);
    });

现在一切都很好。有时您需要向其他人解释一些事情以了解您做错了什么。

【问题讨论】：

【解决方案1】：

使用.on() 函数。 .live() 已弃用

$('#equip_new').on('change', function(){
        alert(1);
    });

【讨论】：

【解决方案2】：

请看本指南 live () 替换为 .on() 函数

【讨论】：

【解决方案3】：

是的，事件委托必须在您要观看事件的元素中的父元素上完成，如下所示：

$('#equip_new').parent().on('#equip_new', 'change', function(){
        alert(1);
});

【讨论】：

【解决方案4】：

@塞巴斯蒂安

.on() 方法也适用于未来的（动态创建的）元素。你只需要按照你使用 deligate 的方式使用它。但是 .on() 语法是 1.7 版使用的新语法，它旨在替代 .bind()、.delegate() 和 .live()。

看小提琴：57BTd

如果你像这样使用 on()，在任何情况下都不会。在 fiddle 而不是 body 标签中，您可以提供任何非动态生成的文档类或 id（任何父元素类或 id）。

【讨论】：