Question

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

我有一个字段，我使用自动完成插件：

它的作用是，每次你要放入一个条目时，你把它放在一个字段（由插件生成）中就像这样，当你放入第一个条目并完成完成时，第二次在输入输入时，会创建另一个具有相同类的新字段：

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

我想要做的是，生成一个on paste处理程序，这样每次粘贴东西都是输入时，它会变成一个带有自己标记的条目（无论如何都与当前问题无关）。当我使用.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

你把它放在一个字段（由插件生成）就像这样你把第一个条目和完成完成，第二个您输入输入的时间，另一个具有相同类的新字段已创建

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

用这样的简单on()替换它：$(".input").on('paste', function (event) {}不会复制它。

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

要为动态元素复制live()，您需要将on()与委托一起使用，这将允许您将事件绑定到最近的静态元素，指定要委派给的元素/选择器

更改您当前的live()：

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

使用与此类似的委派on()：

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

在上文中，事件现已绑定到document，但委托给.input上的paste元素。

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

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

.input元素中最接近的静态父级，但document或body当然可以正常工作。

Answer 2

使用

function addItem(text){
    console.log('Add', text)
}

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

演示：Fiddle

Answer 3

看起来事件只被触发一次，这可能与：

有关

使用.one而不是.on
事件目标被其dom（被删除或移动）更改，从而丢失事件。

我建议您选择真正的.live翻译：

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

您可以跳过就绪事件，因为每次添加新事件时，侦听文档中的事件都会将该事件附加到第二个参数（.input）。

on（）不为我做live（）工作

3 个答案: