Javascript 防止使用click事件添加重复ajaxLoad事件调用

我正在使用MVC Razor-总体目标是创建一个“打印视图”弹出页面

“打印视图”按钮位于父页面上，单击时，将触发一个ajax事件，该事件将使用打印预览中包含的内容填充一个空div：

//from the view
@Ajax.ActionLink("prntPreview", "Display", new { ID = Model.Detail.ID }, new AjaxOptions { UpdateTargetId = "modal" }, new { @class = "btnPreview" })

然后，使用JavasScript/jQuery克隆新填充的div的内容，并创建一个包含以下内容的新窗口：

//in the scripts file
$('.btnPreview').on('click', function () {
    $(document).ajaxStop(function () {
        var pageData = $('#modal').html();
        setTimeout( //add a slight delay
            function () {
                PopupPrint(pageData);
            }, 300);
    });
});

function PopupPrint(data) {
    var mywindow = window.open('', '', 'height=500,width=800,resizable,scrollbars');
    mywindow.document.write(data);
    mywindow.focus();
    //do some other stuff here
}

这就是我遇到困难的地方。我第一次单击时，一切都按预期进行-但是，如果您不离开父页面并尝试第二次使用“打印预览”按钮，则弹出窗口将创建两次，然后再单击三次，以此类推

我认为问题在于每次单击

.btnPreview

时，都会创建一个新的

$（document）.ajaxStop

事件，导致事件多次触发

我尝试将ajaxStop创建为命名函数，该函数在click事件范围之外声明，然后将其清除，但这会产生相同的结果：

var evnt = "";
$('.btnPreview').on('click', function () {
    evnt = 
    $(document).ajaxStop(function () {
        var pageData = $('#modal').html();
        setTimeout( //add a slight delay
            function () {
                PopupPrint(pageData);
                evnt = "";
            }, 300);
    });
});

---

我还初始化了其他

ajaxStop

事件，因此不想完全解除ajaxStop事件的绑定。是否可以从每个ajax事件中获取名称或其他信息，以便我只清除该事件或类似事件？

您可以通过检查作用域之外的变量来防止添加其他触发器，如下所示：

（函数（）{
var alreadyAdded=false；
$（'.btnPreview'）。在（'click'，function（）上{
如果（！已添加）{
$（'.eventTrigger'）。单击（函数（）{
console.log（'printing！'）；
});
alreadyAdded=true；
}
});
})();

添加事件
触发器
我需要解决两个问题。
答案是在ajax事件检查请求是否已完成后解除绑定，并解除绑定并重新连接按钮单击触发器

我就是这样做的：

//in the scripts file
$('.btnPreview').off('click').on('click', function () {

    $(document).ajaxComplete(function (e) {
        var pageData = $('#modal').html();
        setTimeout( //add a slight delay
        function () {
            PopupPrint(pageData);
        }, 300);
        $(this).off(e);
    });

});

我通过在
.on
之前添加
.off（'click'）
来解除单击事件的绑定。这就是阻止它多次出现的原因

另一个问题是，任何ajax事件完成时（由其他事件触发），也会创建弹出窗口-为了避免这个问题，我添加了
$（this）.unbind（e）
到代码块的末尾，该代码块删除了每次ajax事件完成时触发的ajaxComplete绑定
 这种方法允许我检查隐藏的div是否已经填充，这意味着我不需要再等待ajax。但是，每次单击“打印预览”按钮时，我都必须等待ajax事件触发，因为这会使更新的内容包含在预览中。打印预览后，隐藏div的内容将被删除（因为它将很快过期）。