jQuery on() 无法正常工作 [重复]答案

【问题标题】：jQuery on() not working properly [duplicate]jQuery on() 无法正常工作 [重复]
【发布时间】：2013-12-17 16:11:51
【问题描述】：

美好的一天。最近我开始学习 jQuery，并且在使用 jQuery 进行开发方面我很年轻。

我对 .on() 事件有以下问题。我已经在堆栈溢出中搜索了答案，但我还没有找到任何适合我的案例的解决方案。我有以下代码：

$('input.a').on('click',function(){
    $(this).after('<input class="a" type="button" value="click me">');
});

这个功能可以正常工作，但是当我点击它们时生成的按钮什么也不做。我应该使用 .live();事件，但由于我使用的是 jQuery 1.10.2，因此不推荐使用此事件。访问 jQuery 文档后，我发现我应该使用 .on() 以下方式

$('input.a').on('click','input.a',function(){
    $(this).after('<input class="a" type="button" value="click me">');
});

但是一旦我这样做了，整个功能就会停止工作（我假设，因为我没有得到任何反馈），但开发人员的控制台中也没有错误。我做错了什么，还是 .live() 事件有其他替代品？

【问题讨论】：

这部分不正确：$('input.a')使用.on时，需要选择一个包含目标元素的元素，例如：包含输入。
我向您保证 .on 工作正常。
和Turning live() into on() in jQuery。

标签： javascript jquery

【解决方案1】：

您需要将处理程序绑定到一个已经存在的元素，在您的情况下，您将处理程序绑定到 input 元素本身...而不是将其绑定到所有目标输入元素的祖先元素（如文档, body 等）存在于 dom 就绪的文档中

$(document).on('click','input.a',function(){
    $(this).after('<input class="a" type="button" value="click me">');
});

【讨论】：

【解决方案2】：

要使用事件委托，您必须像这样将其绑定到最近的静态父元素

$(document).on('click','input.a',function(){
    $(this).after('<input class="a" type="button" value="click me">');
});

【讨论】：

出于好奇，为什么要指定“最接近”的父级，而不是 body 或 document？根据个人喜好，我将我的事件委托集中在大型应用程序中的指定对象容器中，或者在一次性应用程序中集中在body。

【解决方案3】：

$(selector).live(eventName, handler) 的替换是 $(document).on(eventName, selector, handler)。

在幕后，live 正在使用事件委托，这意味着当事件在 DOM 树中向上冒泡时，它会处理事件，特别是当它冒泡到 DOM 树的顶部到文档元素时。因此，要创建相同的体验，您可以使用on 将处理程序绑定到document，然后将选择器作为第二个参数传入，以表明您只想处理原始目标与该选择器匹配的事件。

由于您比使用live 更能控制此场景，因此您还可以选择绑定到 DOM 树中的不同元素，如果这有意义的话。因此，您可以只绑定到保存动态创建的元素的容器（例如$('.inputWrap').on('click', 'input.a', function (event) { /* ... */ })），而不是绑定到document。

【讨论】：