jquery - jquery插件不适用于html替换

Question

当我在 jquery 插件中替换 html 时container停止对事件做出反应（小提琴http://jsfiddle.net/vfDKj/7/）

(function($) {

    jQuery.fn.myTest = function(){
        var $this = jQuery(this);
        $this.on('keyup', function(){
            $(this).after('<div>event</div>');
        })
        return this;
    }

}(jQuery));    
$(".test").myTest();
var html = $("#container").html();
$("#container").html(html);

我知道，我可以重新初始化，但我需要让它在没有重新初始化的情况下工作。那可能吗？

Answer 1

尝试这个：

(function($) {

$.fn.myTest = function(){
    var $this = jQuery(this);
    $this.on('keyup', ".test", function(){
        $(this).after('<div>event</div>');
    })
    return this;
}

})(jQuery);    /* edit: there was an unbalanced paren here */
$("#container").myTest();
var html = $("#container").html();
$("#container").html(html);

这里的主要区别是我如何打电话$this.on；见第二个论点。这使用委托事件。

编辑：我没有指出这一点，但第二个关键部分是我将插件应用到的包装集：#container.

从jquery.on 的文档中：

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time

Answer 2

您正在替换 dom 元素。你需要“重新初始化”resp。您需要将事件绑定到新创建的元素。另一种方法是简单地更改和重新附加 dom 元素，但是从您的问题中不可能完全猜出您为什么需要更改 html 本身。

Answer 3

您最终可以通过这种方式使用分离：

http://jsfiddle.net/vfDKj/8/

$(".test").myTest();
var html = $("#container *").detach();
$("#container").html(html);