无法打开jQueryUI对话框

Question

1. 失败的小提琴示例

2. 工作实例

我一直在尝试学习如何制作允许人们插入URL链接或图像链接并将其附加到文本编辑器的对话框。 但是当使用class .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>')
    }
});

Answer 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来引用您正在使用的不同对话框？