jquery - jQuery用事件分离内容？

Question

我的问题是，为什么在我分离元素并将它们附加回来之后，第三个 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/

Answer 1

detach()在这里不应该受到责备。

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

试着写：

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

代替：

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

Answer 2

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

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

container.append(detachedContent);

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