如何使用jQuery关闭对话框？
我正在使用下面的代码动态创建一个jQuery UI Dialog小部件：
$(function () { var Selector = $("a:contains('sometext')"); $(Selector).bind('click', function () { var NewDialog = ""; var DialogContetn = '
'; $('body').append(NewDialog); $('#MenuDialog').html(DialogContetn); $('#MenuDialog').hide(); $('#MenuDialog').dialog({ modal: true, title: "title", show: 'clip', hide: 'clip' }); $("#btnCloseDialog").live('click', function () { $("#MenuDialog").dialog('close'); }); return false; }); }); 第一次加载时，jQuery Dialog正常工作，当我点击btnCloseDialog时，jQuery Dialog成功关闭。
但是，之后，btnCloseDialog不再关闭对话框。 为什么会这样？
更新
我把我的代码放在一个jsfiddle上 。
这是一种奇怪的行为，因为该按钮在jsFiddle中正确关闭了对话框，但在我的项目中没有关闭对话框。
因为这在jquery中创建动态对话框的早期出现，我想指出一个更好的方法来做到这一点。 不是将对话框div和内容添加到HTML然后调用它，而是可以通过将HTML直接推送到jquery对象来更轻松地完成此操作，如下所示：
$(function () { $("a:contains('sometext')").click(function() { var NewDialog = $('\ This is your dialog content, which can be multiline and dynamic.
\ '); NewDialog.dialog({ modal: true, title: "title", show: 'clip', hide: 'clip', buttons: [ {text: "Submit", click: function() {doSomething()}}, {text: "Cancel", click: function() {$(this).dialog("close")}} ] }); return false; }); });
我还展示了如何将多个按钮与内联函数放在一起，而不是将live（）函数附加到按钮上。 我已经在几个地方使用过这种方法，它对我很有用。 它还支持表单（我抓住了doSomething（）中的数据并通过ajax提交，但其他方法也有效），等等。
你可能不应该使用id来动态创建内容，因为你可能最终得到多个具有相同id的元素 – 这意味着document.getElementById （我假设sizzle用于#id选择器）将只返回第一个（可能一个不可见的。
我需要一种方法来使用JSON Web服务来控制客户端的警报和更新等事情，而无需客户端启动操作。 我希望更新它以使用网络套接字，但是现在它是一个定时拉动，每次拉动包括下一次拉动的延迟，所以我甚至可以管理一旦客户端加载我的系统。
我也使用show / expire和moment.js按日期时间进行过滤，然后使用带有每个警报ID（此处未显示）的cookie来防止重复通知。 这很顺利，如果我有足够的兴趣，我可能会决定在不久之前把它打包成一个库。
这个问题的具体位是2部分; 1）包含jQuery.dialog（）参数的JSON和2）使用该JSON并创建对话框的代码。 这里的关键是要注意我如何引用’n’对象参数并使用它们动态创建对话框。 tDlg对象是其中很重要的一部分，因为它最终代表对话框并传递给$（）。dialog（）
包含我的对话框参数的JSON代码段：
"doAlert":{ "modal":false ,"height":240 ,"width":380 ,"title":"Welcome to the new BatchManager" ,"body":"Welcome to the new and enhanced
BatchManager!Enjoy!" ,"buttons":[ { "text":"Ok" ,"click":"$(this).dialog('close');" } ] }
JavaScript片段（使用jQuery）基于我的JSON初始化对话框（n对应于doAlert，它是此示例中“通知”数组的一部分）：
var tDlg = { resizable: false, height: (n.doAlert.height) ? n.doAlert.height : 240, width: (n.doAlert.width) ? n.doAlert.width : 240, modal: (n.doAlert.modal) ? n.doAlert.modal : true, dialogClass: "dlgFont" }; if (n.doAlert.buttons) { tDlg.buttons = []; $.each(n.doAlert.buttons, function (i, n) { tDlg.buttons.push({ text: n.text, click: new Function(n.click) }) }) } $('' + n.doAlert.body + '
').dialog(tDlg);
要考虑以下几点：
-
OnDialogClose你应该从DOM中分离#MenuDialog以避免具有相同ID的多个对象，或者你可以在添加一个之前检查div#MenuDialog是否存在。 -
var Selector = $("a:contains('sometext')");除非你在其他地方重新使用它，否则它是毫无意义的。 -
你多次使用
$('#MenuDialog')。 最好将它分配给变量而不是查询var Selector = $('#MenuDialog');一遍又一遍。
我个人以这种方式管理：
1）构建对话框的html，两个span以xxx为默认值
There are two variables: xxx and xxx
2）使div准备好进行对话
$(function() { $( "#dialog1").dialog({ autoOpen:false, modal: true, buttons: { "Button 1": function() { $(this).dialog( "close" ); }, "Button 2": function() { $(this).dialog( "close" ); } } }); });
3）在启动对话框之前，使用此函数修改两个跨度的值：
function showDialog(value1,value2){ $("#var1").html(value1); $("#var2").html(value2); $( "#dialog1").dialog('open'); }
4）因此，当您需要它时，以这种方式调用该函数
showDialog('tom','jerry');
你可以在http://jsfiddle.net/sekmo/L46vb/1/试试这个