jQuery UI 对话框仅在第一次调用时有效答案

【问题标题】：jQuery UI dialog only works the first time it's calledjQuery UI 对话框仅在第一次调用时有效
【发布时间】：2011-06-07 01:08:48
【问题描述】：

我有一个简单的 html 代码片段

<div style="display:none;" id="link_to_list"></div>
 <a href="#" onclick="save_onclick()">
     Back to List
 </a>

还有一个用于处理点击的简单 jquery 函数。

function save_onclick() {
    $( "#link_to_list" ).dialog({
        title:'Are you sure you don\'t want to save?',
        resizable: false,
        height:140,

        modal: true,
        buttons: {
            Ok: function() {
                window.location.href = "findUsers";
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
}

当我第一次单击时，它可以工作，但是 div "link_to_list" 擦除并且我不能再次调用它。我该如何解决这个问题？

【问题讨论】：

即使在那个
标记中什么也没有...把
放在之后，所以链接在
内
@TrevorMA：div 被设置为不可见。把链接放在里面，链接也是不可见的。
@TrevorMA 我不认为他想这样做 - <div> 被用作对话......
问题：为什么在使用 jQuery 时在链接上放置 onclick 属性？ jQuery 的全部意义在于消除对此的需求并将 javascript 保留在 javascript 中！另外，将“关闭”更改为隐藏。关闭将关闭，隐藏应该只显示：无；它
$( this ).dialog("close") 是正确的。这将关闭对话框，它不应该像 $(this).dialog("destroy") 那样销毁它。根据 jqueryui 文档

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

【解决方案1】：

我认为问题可能是在第二次单击时，您会尝试重新初始化对话框，这（再次，如果我没记错的话）将不起作用。相反，您可以先设置对话框，然后让点击处理程序打开对话框。

$( "#link_to_list" ).dialog({
    title:'Are you sure you don\'t want to save?',
    resizable: false,
    height:140,
    autoOpen: false,

    modal: true,
    buttons: {
        Ok: function() {
            window.location.href = "findUsers";
            $( this ).dialog( "close" );
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
});

function save_onclick() {
  $('#link_to_list').dialog('open');
}

【讨论】：

哦，谢谢！！！我一直在用 UI Dialogs 和 open 函数中的代码遇到类似的情况！！！！

【解决方案2】：

$(this).dialog("destroy")

完全删除对话框功能。这会将元素返回到其初始化前的状态。

$(this).dialog("close")

关闭对话框

http://jqueryui.com/demos/dialog/

【讨论】：

【解决方案3】：

Mark 的回答有效，但如果您使用 x 按钮关闭，则它不起作用。不要使用破坏。将 autoOpen 设置为 false，调用对话框，然后在单独的调用中打开

    $( "#dialog" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode"
    });

    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
        return false;
    });

http://jqueryui.com/demos/dialog/#animated

【讨论】：