1

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

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

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

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

我试过使用on()and 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();
});

任何人都知道这里可能会发生什么，以及我该如何解决？

4

2 回答 2

2

使用命名空间来取消绑定以前的点击绑定，如下所示：

$('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;
}
于 2012-10-04T09:34:36.613 回答
0

试试这个：

$('a#close').unbind('click').bind('click', function (event) {
//Your Code
});
于 2012-10-04T09:08:41.047 回答