Question

我一直在努力学习如何制作允许人们插入网址链接或图片链接并将其附加到文本编辑器的对话框。但是在使用类.dialog时，我甚至无法在单击时打开对话框。当对象#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来引用您正在使用的不同对话框？

无法打开jQueryUI对话框

1 个答案: