jquery - 使用 jquery detach() 两次不能按预期工作

Question

我的 DOM 中有一个自动完成文本框（使用 jquery）。我有一个场景，我需要在单击按钮时在对话框中显示此自动完成文本框。仅在对话框视图中执行自动完成内容，然后在我关闭对话框时将自动完成文本框设置回 DOM。这是示例：

$("#autocom-div button").click(function(){
    $("#autocom-div #autocomplete").detach().dialog({
        close: function(){
            $(this).removeClass('ui-dialog-content ui-widget-content').removeAttr('style');
            $('#autocom-div button').before(this);
        }
    });
});

相同的 jsfiddle 链接：

http://jsfiddle.net/s24101984/EBduF/350/

问题：当我第二次单击按钮时

Answer 1

问题不在于detach()，而在于dialog()。在创建另一个对话框之前，您必须销毁对话框的现有实例。因为destroy方法也会删除div托管，所以你需要先克隆它，如下所示：

$("#autocom-div button").click(function()
{
    var parent = $("#autocom-div"),
        elm    = $("#autocomplete"),
        clone  = $("#autocomplete").clone();

    $("#autocomplete").detach().dialog({
         close: function(){
             parent.prepend(clone);
             $(this).dialog('destroy').remove();
         }
    });

});

jsfiddle