Question

当我在container内替换html时，jquery插件停止对事件做出反应（小提琴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

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

Answer 2

试试这个：

(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。

来自documentation for 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 3

你最终可以这样使用分离：

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

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

jquery插件不适用于html替换

3 个答案: