Question

美好的一天。最近我开始学习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（）事件还有其他替代品吗？

Answer 1

您需要将处理程序绑定到已存在的元素，在这种情况下，您将处理程序绑定到input元素本身...而是将其绑定到所有目标输入元素的祖先元素（如文件，正文等存在于文件中的dom ready

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

Answer 2

要使用事件委派，必须将其绑定到最近的静态父元素，如此

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

Answer 3

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

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

因为你比live更能控制这个场景，所以你也可以选择绑定到DOM树中的不同元素，如果这是有道理的。因此，您只需绑定到包含动态创建元素的容器（例如document），而不是绑定到$('.inputWrap').on('click', 'input.a', function (event) { /* ... */ })。

jQuery on（）无法正常工作

3 个答案: