Question

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

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/

jQuery分离内容与事件？

2 个答案: