Jquery on（）不适合我做live（）工作

jQuery网站

上已经提到了它。不再推荐使用live（）

方法。
我试图使用

.on（）

事件，但它的性能没有达到预期。在下面的场景中使用

.live

，我没有遇到任何问题

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

它所做的是，每次你准备输入一个条目时，你都会将其放入一个字段（由插件生成），就像这样，当你输入第一个条目并完成时，第二次输入时，会创建另一个具有相同类的新字段：

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

谁能解释一下为什么会这样

您将它放在一个字段（由插件生成）中，如下所示 您输入了第一个条目，完成了第二个条目 当您输入时，另一个具有相同类的新字段 创造

这听起来像一个动态元素。使用会将该事件冒泡到

文档

，然后在

元素上发生
粘贴
时重新操作

将其替换为一个简单的
on（）
，如下所示：
$（“.input”）。在（'paste'）上，函数（事件）{}
不会复制它

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

要为动态元素复制
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
。例如
body
或更接近的静态父元素，类似于以下内容：

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

哪一个是
.input
元素最接近的静态父元素，尽管
文档
或
正文
可以正常工作

您将它放在一个字段（由插件生成）中，如下所示
您输入了第一个条目，完成了第二个条目
当您输入时，另一个具有相同类的新字段
创造

这听起来像是一个动态元素。使用会将该事件冒泡到
文档
，然后在
元素上发生
粘贴
时重新操作

将其替换为一个简单的
on（）
，如下所示：
$（“.input”）。在（'paste'）上，函数（事件）{}
不会复制它

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

要为动态元素复制
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
。例如
body
或更接近的静态父元素，类似于以下内容：

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

哪一个是
.input
元素最接近的静态父元素，尽管
文档
或
正文
可以正常工作。
使用

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);
    });
});

演示：
使用

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);
    });
});

演示：
事件似乎只触发一次，这可能与：


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

我建议您进行真正的
现场翻译：

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

您可以跳过就绪事件，因为在文档中侦听事件将在每次添加新参数时将该事件附加到第二个参数（
.input
）。
事件似乎只触发一次，这可能与：


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

我建议您进行真正的
现场翻译：

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

您可以跳过就绪事件，因为每次添加新参数时，在文档中侦听事件都会将该事件附加到第二个参数（
.input
）。
尝试使用
on
方法时使用的语法是什么？它应该是
$（'body'）。on（'paste'，“.input”，函数（事件）{
尝试在
方法上使用
时使用的语法是什么？它应该是
$（'body'）。在（'paste'，“.input'，函数（事件）{
非常感谢，伙计，你能解释一下我的版本出了什么问题吗？为什么它只运行了一次？谢谢你的帮助explanation@ComeRun当前位置我更新了答案，添加了解释。我想我使用了正确的术语，但我相信如果我没有使用，任何人阅读本文都会纠正我。希望这会有所帮助。这是一个很棒的人，但我相信你的意思是nt“.input”而不是你最后一句话中的“document”，对吗？@ComeRun:如果你指的是：
而不是document，你应该绑定到最近的静态元素。
我的意思是
文档
好的。我指的是用最近的静态父元素替换
文档
，类似于此：