jQuery UI对话框在appendTo后无法拖动和调整大小？

Question

jQuery UI对话框在appendTo后无法拖动和调整大小？

javascriptjqueryjquery-uijquery-ui-dialogappendto

4

我将使用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"添加到我的动态小对话框（注释）时：

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

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

有什么想法为什么它们不能被拖动和调整大小？

- Siddharth Trikha

1

你需要为动态生成的HTML委派事件，请参见此处http://stackoverflow.com/questions/22960144/jquery-draggable-not-working-for-appended-table-row - Kartikeya Khosla

@Kartikeya：我尝试使用

$( "#outter-dialog" ).on( "mouseover", ".MyDialog", function( event ) { var elem = $( this );     alert(elem.text());     elem.dialog("option", "resizable", true);    });

。但仍然无法调整大小。有任何想法吗？ - Siddharth Trikha

2个回答

-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');
        }
    }
});

- sonali pawar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chamika Sandamal · Accepted Answer

以下是您可以解决此问题的方法，演示。只需将 可拖动 和 可调整大小 设置为 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++;
});