jQuery ui 对话框在 appendTo 后不可拖动和调整大小？答案

【问题标题】：jQuery ui dialog boxes not draggable and resizable after appendTo?jQuery ui 对话框在 appendTo 后不可拖动和调整大小？
【发布时间】：2014-11-08 14:08:51
【问题描述】：

我正在使用 jquery ui 对话框来实现便签。单击按钮会打开一个大的全屏 ui 对话框，在该大对话框中是一个用于添加小对话框（注释）的按钮。

HTML：

<body>

  <button id="opener">open the dialog</button>

  <div id="outter-dialog" title="Notes">
    <button id = "add-note">Add Note</button>
  </div>

JS：

$( "#outter-dialog" ).dialog({
        autoOpen: false,
        title: "Success Message",
        width: $(window).width(),
        height: $(window).height(),
        modal: false,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

$("#opener").click(function(){
    $( "#outter-dialog" ).dialog('open');
});


var prevelement;
$("#add-note").click(function () {
    var dynamicDialog = $('<div id="MyDialog"> <textarea>Hello</textarea> </div>');
    var pos;
    if (prevelement) {
        pos = {
            my: "left",
            at: "bottom",
            of: prevelement
        }
    }

    dynamicDialog.dialog({
        title: "Note",
        modal: false,
    appendTo: "#outter-dialog",
        buttons: [{
            text: "Save",
            click: function () {}
        }],
        position: pos
    });
    prevelement = dynamicDialog
});

现在当我将appendTo: "#outter-dialog" 添加到我的动态小对话框（注释）时遇到问题：

将它们附加到外部对话框后它们不再可调整大小和拖动。

我将它们附加到外部对话框中，以便在外部对话框打开/关闭时显示/隐藏内部注释。

知道为什么它们不能拖动和调整大小吗？

【问题讨论】：

您必须为动态生成的 html 委托事件，请参见此处stackoverflow.com/questions/22960144/…
@Kartikeya：我试过 $( "#outter-dialog" ).on( "mouseover", ".MyDialog", function( event ) { var elem = $( this ); alert(elem.text()); elem.dialog("option", "resizable", true); }); 。但它仍然不能调整大小。有什么想法吗？？

标签： javascript jquery jquery-ui jquery-ui-dialog appendto

【解决方案1】：

这是解决问题的方法，Demo 只需将dragable 和resizable 设置为false，并在创建对话框后分别调用它们。并记住克隆动态元素并为该元素使用动态 id

var elementCount = 0;
$("#add-note").click(function () {
    var dynamicDialog = $('<div> <textarea>Hello</textarea> </div>');
    var pos = {
        my: "left",
        at: "bottom",
        of: "#dialog" + elementCount
    }

    var dialogId = "dialog" + elementCount;
    dynamicDialog.clone(true).attr("id", dialogId).dialog({
        title: "Note",
        modal: false,
        appendTo: "#outter-dialog",
        draggable: false,
        resizable: false,
        buttons: [{
            text: "Save",
            click: function () {}
        }],
        position: pos
    });
    $("#" + dialogId).parent().draggable().resizable();
    elementCount++;
});

【讨论】：

appendTo 不起作用，因为它是在 1.10 版中添加的
appendTo 的对话框，我的意思是。
很抱歉给您带来了困惑。为您更新了工作答案:)
以上答案有效，但现在新笔记的位置不是并排的，它们是bottom。在尝试top 之后，太新的笔记不要并排移动。有什么想法吗？
他们是一个在另一个之下。我的意思是另一个

【解决方案2】：

$( "#outter-dialog" ).dialog({
autoOpen: false,
title: "Success Message",
width: $(window).width(),
height: $(window).height(),
modal: false,
resizable: true,
draggable: true,
buttons: {
        Cancel: function() {
         $(this).dialog('close');
        }
    }
});

【讨论】：