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

将所有事件绑定移动到函数外部，一切都应该正常工作。

因此，这些部分不应该在函数内部：

$("#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。然后你可以在模态打开时从那里得到它。

在功能中：

//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, .... }):
});

阻止先前的点击请求

1 个答案: