无法打开 jQueryUI 对话框答案

【问题标题】：Can't open jQueryUI dialogs无法打开 jQueryUI 对话框
【发布时间】：2014-05-30 16:50:37
【问题描述】：

我一直在尝试学习如何制作允许人们插入 url 链接或图像链接并将其附加到文本编辑器的对话框。但是当使用.dialog 类时，我什至无法在点击时打开对话框。在第二个示例中，当它的 id 为 #dialog 时，该对话框运行良好。有人可以告诉我我的第一个例子有什么问题吗？

HTML：

<a id="bold" class="font-bold">B</a>
<a id="italic" class="italic">I</a>

<a id="image">Image</a>
<div class="dialog" title="Insert picture url">
    <p><input id="imageurl" type="text"></input>
</div>
<a id="link">Url</a>
<div class="dialog" title="Insert url">
    <p><input id="url" type="text"></input>
        <input id="urltext" type="text"></input>
</div>

<select id="fonts">
 <option value="Arial">Arial</option>
 <option value="Comic Sans MS">Comic Sans MS</option>
 <option value="Courier New">Courier New</option>
 <option value="Monotype Corsiva">Monotype</option>
 <option value="Tahoma">Tahoma</option>
 <option value="Times">Times</option>
</select>
<br/>
<iframe id="textEditor" style="width:500px; height:170px;">
</iframe>

jQuery

var input_value;

$(".dialog").dialog({
            resizable: false,
            height: 140,
            modal: true,
            autoOpen: false,      
            buttons: {
                "Confirm": function() {
                    input_value;
                    $(this).dialog("close");
                },
                "cancel": function() {
                     $(this).dialog("close");
                }
            }
});

$('#image').click(function() {
  $(this).next('.dialog').dialog("open"); 
   var imageurl =  $('#imageurl').val();
    input_value = function(){
        $('#textEditor').contents().find('body').append('<img src="'+imageurl+'"/>');
    }
});

$('#link').click(function() {
  $(this).next('.dialog').dialog("open"); 
   var urllink =  $('#url').val(),
       urltext = $('#urltext').val();
    input_value = function(){
        $('#textEditor').contents().find('body').append('<a href="'+urllink+'">"'+urltext+'"</a>')
    }
});

【问题讨论】：

我认为您应该为对话框使用 ID，尤其是当它们因单击的按钮而异时。

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

【解决方案1】：

在页面呈现后检查源。当您在对话框 div 上创建对话框时，它会更改 dom，以便下一个元素不再是 div，而是下一个链接。因此，jquery 找不到任何 div 并且不会处理您的对话框打开请求。

渲染代码：

<a id="bold" class="font-bold">B</a>
<a id="italic" class="italic">I</a>
<a id="image">Image</a>
<a id="link">Url</a>

是否有理由不使用 id 来引用您正在使用的不同对话框？

【讨论】：