Question

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

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

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

如果您重复此过程，则会触发3次点击事件，因此很明显live()会在某处附加这些事件。

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

以下是我正在使用的代码：

HTML

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

使用部分视图首次点击事件调用弹出窗口

$('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;
});

如果我理解正确，您会尝试在关闭对话框时运行第二次单击操作。因此我会在对话框中使用build in close函数，如下所示：

$('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
});

jquery live（）附加点击事件，导致多次点击

2 个答案: