jquery - on() 不能为我完成 live() 工作

Question

jQuery网站上提到.live()方法不再推荐。
我试图使用 .on() 事件，但它没有按我的预期执行。在以下场景中使用 .live ，我没有遇到任何问题。

我有一个使用自动完成插件的字段:

它的作用是，每次您要输入一个条目时，您都将其放入一个字段(由插件生成)中，就像这样，当您输入第一个条目并完成时，这是第二次您正在输入内容，将创建另一个具有相同类的新字段:

<li id="select">
    <input type="text" autocomplete="off" size="0" class="input">
</li> 

我想做的是，生成一个粘贴处理程序，以便每次我粘贴某些内容时，它都会变成带有自己标签的条目(无论如何，这与当前问题无关)。当我使用 .live 事件时，它按预期工作。它不仅可以处理我的第一次粘贴，还可以处理以后的粘贴。但是当我将其更改为 .on 而不是 live 时，它​​仅适用于第一次粘贴。以下是我的代码:

$(document).ready(function () {
    $(".input").live('paste', function (event) {
        var element = this;
        setTimeout(function () {
            var text = $(element).val();
            addItem(text);
        }, 10);
    });
});

谁能解释一下为什么会发生这种情况？

Answer 1

you put it in a field (generated by the plugin) like this that is when you put the first entry and the completion is done, for the second time you are entering the input, another new field with the same class is created

这听起来像是一个动态元素。使用live()会将该事件冒泡到 document，然后在 .input 元素上发生 paste 时重新执行操作。

用简单的 on() 替换它，如下所示: $(".input").on('paste', function (event) {} 不会复制这个。

这只是一个简单的绑定(bind)，一旦元素被动态替换/重新添加，绑定(bind)事件就会在元素被删除后消失，即使它被重新添加。

要为动态元素复制 live()，您需要使用 on() 进行委托(delegate)，这将允许您将事件绑定(bind)到最近的静态元素，指定要委托(delegate)的元素/选择器。

将当前的 live() 更改为:

$(document).ready(function () {
    $(".input").live('paste', function (event) {
        var element = this;
        setTimeout(function () {
            var text = $(element).val();
            addItem(text);
        }, 10);
    });
});

要使用 on() 进行委托(delegate)，与此类似:

$(document).ready(function () {
    $(document).on("paste", ".input", function (event) {
        var element = this;
        setTimeout(function () {
            var text = $(element).val();
            addItem(text);
        }, 10);
    });
});

在上面的事件现在绑定(bind)到 document，但委托(delegate)给 paste 上的 .input 元素。

您应该绑定(bind)到最近的静态父元素，而不是document。例如 body 或更接近的静态父级，类似于:

$('body').on("paste", ".input", function (event) {...}

.input 元素的最接近的静态父元素是哪个，尽管 document 或 body 当然可以正常工作。