javascript - 在对话框上使用 .replaceWith()。怎么了？

Question

我想切换 JQuery Dialog使用按钮。

要替换对话框中的文本，我使用 .replaceWith()

问题是，即使我设置了，文本也不会被替换，并且对话框会显示

<div id="dialog-confirm" title="Can you confirm?" style="display: none;"> 

这是代码

(function() {
    $( "#dialog:ui-dialog" ).dialog( "destroy" );

    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Okay": function() {
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
});

function showhide(iname) {
    var item = document.getElementById(iname).style;
    if (item.display == 'none') {
    item.display = '';
    } else {
    item.display = 'none';
    }
}

$('div.dialog-text').replaceWith( "<b>New text goes here</b>" );

并且可以在以下位置进行现场试用

http://jsfiddle.net/littlesandra88/XxVtU/

另外，如果有更好的方法，请告诉我=)

Answer 1

文本替换似乎在 Chrome 11、Firefox 4 和 IE 9 中有效。出现该对话框是因为您正在文档就绪事件处理程序中初始化对话框插件，并且 jQuery UI 设置了新样式(包括 display) 到对话框。如果您希望隐藏它，请稍后隐藏它或仅在需要时初始化它。

由于它是一个模式对话框，由于覆盖，单击链接来隐藏它永远不会起作用，因此您可能只想在需要显示对话框时才初始化它。为此，我将初始化代码从就绪处理程序移至 showhide 函数:

function showhide(iname) {
    $("#" + iname).dialog({
        resizable: false,
        height: 140,
        modal: true,
        buttons: {
            "Okay": function() {
                $(this).dialog("close");
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });
}

http://jsfiddle.net/XxVtU/8/

---

正如 T.J. Crowder在评论中提到，还有autoOpen: false，可以在初始化时应用。我将你的 fiddle 修改为 demonstrate this .