如何使用jQuery关闭对话框?

前端之家收集整理的这篇文章主要介绍了如何使用jQuery关闭对话框?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用下面的代码动态地创建一个jQuery UI对话框小部件:
  1. $(function () {
  2. var Selector = $("a:contains('sometext')");
  3. $(Selector).bind('click',function () {
  4. var NewDialog = "<div dir=rtl id='MenuDialog'></div>";
  5. var DialogContetn = '<div dir=rtl ><table width=100%><tr><td><textarea id="txtRequestContent" cols="30" rows="2"></textarea></td><td><table><tr><td><input id="btnSendEditionRequest" type="button" value="Send" /></td></tr><tr><td><input id="btnCloseDialog" type="button" value="Cancel" /></td></tr></table></td></tr></table></div>';
  6. $('body').append(NewDialog);
  7. $('#MenuDialog').html(DialogContetn);
  8. $('#MenuDialog').hide();
  9. $('#MenuDialog').dialog({ modal: true,title: "title",show: 'clip',hide: 'clip' });
  10. $("#btnCloseDialog").live('click',function () {
  11. $("#MenuDialog").dialog('close');
  12. });
  13. return false;
  14. });
  15. });

第一次加载时,jQuery对话框工作正常,当我点击btnCloseDialog时,jQuery对话框成功关闭

但是,之后,btnCloseDialog不再关闭对话框。为什么会发生这种情况?

更新

我把代码放在了jsfiddle上。

这是奇怪的行为,因为按钮在jsFiddle中正确关闭对话框,而不是在项目中的对话框上。

解决方法

因为在jquery中搜索创建一个动态对话框的早期,我想指出一个更好的方法来做到这一点。而不是将对话框div和内容添加到HTML,然后调用它,您可以通过将HTML直接推送到jquery对象中来更轻松地执行此操作,如下所示:
  1. $(function () {
  2. $("a:contains('sometext')").click(function() {
  3. var NewDialog = $('<div id="MenuDialog">\
  4. <p>This is your dialog content,which can be multiline and dynamic.</p>\
  5. </div>');
  6. NewDialog.dialog({
  7. modal: true,hide: 'clip',buttons: [
  8. {text: "Submit",click: function() {doSomething()}},{text: "Cancel",click: function() {$(this).dialog("close")}}
  9. ]
  10. });
  11. return false;
  12. });
  13. });

我还展示了如何使用内置函数放置多个按钮,而不是在按钮上附加一个live()函数。我在几个地方使用过这个方法,它对我来说很好。它还支持表单(我抓取了doSomething()中的数据并通过ajax提交,但是其他方法也是这样)等等

猜你在找的jQuery相关文章