jquery live() 附加点击事件导致多次点击

Question

我的 asp.net MVC3 应用程序中的 jQuery ajax 功能出现了一些奇怪的行为。

我有几个数据框，每个数据框都包含一个链接，用于打开弹出窗口并更改每个框中的数据。为此，我添加了一个 jquery live() click 事件来通过 jQuery ajax 调用处理数据。在 ajax 调用的“成功”方法中，我获取返回数据并打开一个 UI 对话框弹出窗口（部分视图），其中包含单选按钮列表。我选择了一个不同的单选按钮并按下“关闭” - 关闭按钮会触发另一个 live() 点击事件，通过 ajax 调用处理新数据，该调用会刷新主页上框中的数据。

这是第一次完美运行。如果您然后单击以再次更改它，弹出窗口将打开，允许您选择一个新值，但是这次在弹出窗口上按下关闭会触发两个点击事件，这会在我的 MVC 控制器中引发空错误。

如果你重复这个过程，它会触发 3 个点击事件，所以很明显 live() 正在某处附加这些事件。

我尝试过使用on() 和click()，但是页面本身是由通过ajax 加载的面板组成的，所以我使用live() 来自动绑定事件。

这是我正在使用的代码：

HTML

<p><!--Data to update goes here--></p>
<a href="#" class="adjust">Update Data</a>

First Click 事件调用带有局部视图的弹出窗口

$('a.adjust').live('click', function (e) { 
    var jsonData = getJsonString(n[1]);
    var url = '@Url.Action("ChangeOptions", "Search")';
    var dialog = $('<div id="ModalDialog" style="display:none"></div>').appendTo('body');
    // load the data via ajax
    $.ajax({
        url: url,
        type: 'POST',
        cache: false,
        contentType: "application/json; charset=utf-8",
        data: jsonData,
        success: function (response) {
            dialog.html(response);
            dialog.dialog({
                bgiframe: true,
                modal: true
                }
            });
        }
    });
    e.preventDefault();
});

第二次点击事件，获取新信息以返回更新的局部视图

$('a#close').live('click', function (event) { 
    var jsonData = getJsonString(n[1]);
    var url = '@Url.Action("GetChangeInfo", "Search")';
    $.ajax({
        url: url,
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        data: jsonData,
        success: function (response) {
            $('#box-' + @column).html(response);  //this refreshes the box on the main page
        },
        error: function () {
        }
    });
    $('#ModalDialog').dialog('close');
    event.preventDefault();
});

有人知道这里可能发生什么，我该如何解决？

Answer 1

使用命名空间来解除之前的点击绑定，如下所示：

$('a.adjust').unbind('click.adjustclick');

然后将点击动作绑定到a.adjust：

$('a.adjust').bind('click.adjustclick', function(){

  //your code here

  //note the return false, this prevents the browser from visiting the URL in the href attribute
  return false;
});

如果我对您的理解正确，您尝试在对话框关闭时运行第二次单击操作。因此，我会为这样的对话框使用内置关闭功能：

$('a.adjust').bind('click.adjustclick', function(){
    var jsonData = getJsonString(n[1]);
    var url = '@Url.Action("ChangeOptions", "Search")';
    var dialog = $('<div id="ModalDialog" style="display:none"></div>').appendTo('body');
    // load the data via ajax

    $.ajax({
        url: url,
        type: 'POST',
        cache: false,
        contentType: "application/json; charset=utf-8",
        data: jsonData,
        success: function (response) {
            dialog.html(response);
            dialog.dialog({
                bgiframe: true,
                modal: true,
                close: function(){
                    var jsonData2 = getJsonString(n[1]);
                    var url2 = '@Url.Action("GetChangeInfo", "Search")';

                    $.ajax({
                        url: url2,
                        type: 'POST',
                        contentType: "application/json; charset=utf-8",
                        data: jsonData2,
                        success: function (response2) {
                            $('#box-' + @column).html(response2);  //this refreshes the box on the main page
                        },
                        error: function () {
                        }
                    });
                  }
                }
            });
        }
    });
});

如果你使用自己的按钮a#close，给它绑定一个点击事件来关闭对话框，它会自动触发对话框的关闭函数。

$('a#close').unbind('click.closedialog');
$('a#close').bind('click.closedialog', function () {
  $('#ModalDialog').dialog('close');
  return false;
}

Answer 2

试试这个：

$('a#close').unbind('click').bind('click', function (event) {
//Your Code
});