2

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

谁能解释为什么会这样？

4

3 回答 3

3

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

这听起来像是一个动态元素。使用live()会将该事件冒泡到，然后在元素上发生documenta 时重新采取行动。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元素 on paste。

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

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

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

于 2013-03-27T00:23:23.183 回答
1

利用

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

演示：小提琴

于 2013-03-27T00:24:09.577 回答
0

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

  • 一个名为 using.one和 not的事件.on
  • 事件目标被其 dom 更改（被删除或移动），因此丢失事件。

我建议进行真正的.live翻译：

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

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

于 2013-03-27T00:27:02.130 回答