Question

我正在使用MVC Razor - 总体目标是创建一个＆＃34;打印视图＆＃34;弹出页面。

打印视图按钮位于父页面上，单击时会触发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事件中获取名称或其他内容，以便我可以清除该事件或类似事件？

Answer 1

您可以通过检查范围之外的变量来阻止添加其他触发器，如下所示：

(function() {
  var alreadyAdded = false;
  $('.btnPreview').on('click', function() {
    if (!alreadyAdded) {
      $('.eventTrigger').click(function() {
        console.log('printing!');
      });
      alreadyAdded = true;
    }
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnPreview">Add Event</button>
<button class="eventTrigger">Trigger</button>

请注意，变量和函数封装在自动执行的匿名函数中，不会污染全局空间。

可以在开发者控制台中看到示例的输出。如果删除if-check，则每次单击“添加事件”按钮时，每次单击“触发”按钮时都会生成一个附加的打印语句（这是您的问题）。使用if，触发按钮上只会有一个事件。

Answer 2

我需要解决2个问题。答案是在检查了请求已完成后取消绑定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);
    });

});

我通过在.off('click')之前添加.on来取消绑定点击事件。这就是阻止它弹出多次的原因。

另一个问题是，任何时候任何ajax事件完成（由其他东西触发）也会创建弹出窗口 - 为了解决这个问题，我将$(this).unbind(e);添加到代码块的末尾，删除了ajaxComplete绑定每次任何ajax事件完成时都会被触发。

防止使用单击事件添加的duplcate ajaxLoad事件调用

2 个答案: