javascript - 阻止先前的点击请求

Question

我有表格列表，

<table id="<%#DataBinder.Eval(Container.DataItem, "Certificate")%>" class="tbl_evenSearchResultRow" onmouseover="this.className='ResultGridRowSeleted'" onmouseout="this.className='tbl_evenSearchResultRow'" onclick="return SynopsisWindowOpen(this)">

每个我使用下一个功能的onclick:

 function SynopsisWindowOpen(obj) {
var title = $(obj).find("strong[name='title']").html();

var isParentools = 0;
if (window.location.href.indexOf('recent_releases.aspx') > -1)
    isParentools = 1;

var url = "/ratings/Synopsis.aspx?logoonly=1&Certificate=" + obj.id + "&Title=" + encodeURIComponent(title) + "&parentools=" + isParentools;

$("#ratingModal").on("show.bs.modal", function (e) {
    $.ajax({
        url: url,
        cache: false,
        dataType: "html",
        success: function (data) {
            $("#ratingModal").find(".modal-body").html(data);
        }
    });
});
$("#ratingModal").on("hide.bs.modal", function (e) {
    $(this).find(".modal-body").html('');
});
$("#ratingModal").modal('show');

return false;
}

通过url我渲染模态的主体:我从request.query获取证书并根据它渲染主体

LoadSynopsisContent(Request.QueryString["Certificate"], Request.QueryString["parentools"]);

问题:当我第一次单击时 - 一切似乎都很好，在模态主体中第二次单击时，首先渲染第一次单击的主体，然后渲染第二次单击的主体。等等。不知道问题出在哪里。

首先我使用 jquery load 函数，但后来我更改为禁用缓存的简单 ajax 调用。

Answer 1

将所有事件绑定(bind)移至函数外部，一切都应该正常工作。

因此，这些部分不应该位于函数内部:

$("#ratingModal").on("show.bs.modal", ....);

$("#ratingModal").on("hide.bs.modal", ....);

这是组织代码的一种方法:

var url; //a global variable ... not a good idea though
function SynopsisWindowOpen(obj) {
    ....
    url = .....
}

$(function() {
    $("#ratingModal").on("show.bs.modal", ....);

    $("#ratingModal").on("hide.bs.modal", ....);
});

但是，方法是不使用内联 JavaScript，而是利用 jQuery 的强大功能将结构与行为分开。

更新

您可以将新的 url 存储在模态的 data 属性中，而不是使用全局变量 url。然后，当模式打开时，您可以从那里获取它。

在函数中:

//calculate the url
var url = .....
//store the url in the modal
$('#ratingModal").data('table-url', url);

在模态事件处理程序中:

$("#ratingModal").on("show.bs.modal", function(e) {
    //retrieve the url from the modal
    var url = $(this).data('table-url');
    //use the url
    $.ajax({ url: url, .... }):
});