jQuery用事件分离内容？答案

【问题标题】：jQuery detach content with events?jQuery用事件分离内容？
【发布时间】：2013-02-19 16:00:00
【问题描述】：

我的问题是，为什么在我分离元素并将它们附加回来之后，第三个 div 上的点击事件不再触发？事件不会被保留。

var test = (function($, undef) {
    var t = {};
    t.test = function(){
        var container = $('<div/>').appendTo('body');           
        $('<div/>', {
            'class' :   'some',
            'text'  :   'text'
        }).appendTo(container);         
        $('<div/>', {
            'class' :   'some',
            'text'  :   'text'
        }).appendTo(container);         
        $('<div/>', {
            'class' :   'some',
            'text'  :   'text',
            'click' :   function(){
                console.log("ahoy");
            }
        }).appendTo(container);         
        $('<div/>', {
            'class' :   'some',
            'text'  :   'text'
        }).appendTo(container);         
        var content = container.html();
        var detachedContent = $(content).detach();
        container.empty();          
        //setTimeout(function(){
            container.append(detachedContent);
        //}, 2000);         
    };      
    return t;
})(jQuery); 
test.test();

示例：http://jsfiddle.net/sCJfc/

【问题讨论】：

标签： jquery events append detach

【解决方案1】：

detach() 不应归咎于此。

您正在执行容器元素内部标记的副本，并且您正在分离从该副本创建的元素。这些元素一开始就不是 DOM 的一部分，并且确实不会在它们上注册任何处理程序。

尝试写作：

var detachedContent = container.children().detach();

代替：

var content = container.html();
var detachedContent = $(content).detach();

【讨论】：

是的，在 .html() API 中已经说过了。谢谢:)

【解决方案2】：

尝试克隆子元素，删除它们，然后使用克隆将它们添加回来。

var detachedContent = $(container).children().clone(true);
console.log(detachedContent);
container.empty();

container.append(detachedContent);

工作示例： http://jsfiddle.net/sCJfc/2/

【讨论】：