jquery 对话框自定义关闭按钮仅在第一次加载时有效，在第二次加载时无效，为什么？答案

【问题标题】：jquery dialog custom Close button works only first load, not on second onward loads why?jquery 对话框自定义关闭按钮仅在第一次加载时有效，在第二次加载时无效，为什么？
【发布时间】：2013-11-14 07:59:22
【问题描述】：

在我的 MVC 3 应用程序中，我有一个链接按钮，单击此按钮后，会在 jquery 对话框中加载部分视图。

查看

   <a class="dialogLink" href="/Home/OpenDialog">OPen Dialog</a>

局部视图

<div id="dlgReport"><input type="button" id="closeDialog" value="Close"/></div>

控制器

public ActionResult OpenDialog(ViewModel model){
 //setting value
return PartialView(model);}

Jquery 代码

$(function () {
  $.ajaxSetup({ cache: false, async: false });
  $('.dialogLink').live('click', function () {
     var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
     var dialogDiv = "<div id='" + dialogId + "'></div>";
     var data = $('form').serialize();
     $.post(this.href, data)
     .success(function (result) {
        $(dialogDiv).html(result).dialog({
        autoOpen: true,modal: true,title: 'Test',
        open: function () {
          $('#closeDialog').bind('click', function (e) {
          //debugger;
          $(".ui-dialog-content").dialog().dialog("close");
     });}});})
     return false;});});

一切正常，当我单击链接按钮（打开对话框）时，一个发布请求将转到控制器，填充数据并将数据传递给部分视图，部分视图加载自定义“关闭对话框”按钮。
第一次单击“关闭对话框”按钮时，关闭对话框，但当我再次加载对话框时，“关闭对话框”将不起作用。
我用调试器检查，第二次，

('#closeDialog').bind('click', function (e) {

没有调用，不知道这里有什么问题。请建议！谢谢！

注意 - 如果我使用代码 "$(this).dialog('close');" 而不是 "$(".ui-dialog-content").dialog ().dialog("close");"，然后我从第一次点击“关闭对话框”按钮时收到未知错误。

【问题讨论】：

标签： jquery

【解决方案1】：

您不能多次绑定该事件。试试

 $(function () {
            $.ajaxSetup({ cache: false, async: false });
            $('.dialogLink').live('click', function () {
                var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
                var dialogDiv = "<div id='" + dialogId + "'></div>";
                var data = $('form').serialize();
                $.post(this.href, data)
                .success(function (result) {
                    $(dialogDiv).html(result).dialog({
                        autoOpen: true, modal: true, title: 'Test',
                        open: function () {
                            $('#closeDialog').unbind('click', fnBindClick);
                            $('#closeDialog').bind('click',fnBindClick);
                        }
                    });
                })

                function fnBindClick(e) {
                    //debugger;
                    $(".ui-dialog-content").dialog().dialog("close");
                } 
                return false;
            });
        });

【讨论】：

【解决方案2】：

最后，我从其他堆栈溢出线程得到答案，我们需要清空并删除对话框，

$(function () {
 $.ajaxSetup({ cache: false, async: false });
 $('.dialogLink').live('click', function () {
 var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
 var dialogDiv = "<div id='" + dialogId + "'></div>";
 var data = $('form').serialize();
 $.post(this.href, data)
 .success(function (result) {
    $(dialogDiv).html(result).dialog({
    autoOpen: true,modal: true,title: 'Test',
    open: function () {
      $('#closeDialog').bind('click', function (e) {
      //debugger;
      $(".ui-dialog-content").dialog().dialog("close");
      $(this).empty();
      $(this).remove();
 });}});})
 return false;});});

【讨论】：