防止使用單擊事件添加重複ajaxLoad事件調用

我正在使用MVC Razor - 總體目標是創建一個「打印視圖」彈出式頁面。防止使用單擊事件添加重複ajaxLoad事件調用

打印預覽按鈕是父頁面，點擊後，一個Ajax事件被觸發，將填充空分度，將被包含在打印預覽的內容上：

//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事件中獲取名稱或其他名稱，以便我可以清除該事件或類似事件？

來源

2016-01-04 wf4

我需要解決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); 
    }); 

});

我由.on之前添加.off('click')解除綁定click事件。這是阻止它彈出多次。

另一個問題是，任何時候任何ajax事件完成（由其他事件觸發）也會創建彈出窗口 - 爲了解決這個問題，我在代碼塊的末尾添加了$(this).unbind(e);，它刪除了正在存在的ajaxComplete綁定每當任何ajax事件完成時觸發。

來源

2016-01-04 16:04:11 wf4

可以防止的範圍之內具有可變檢查這樣增加額外的觸發器：

(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檢查，則每次點擊「添加事件」按鈕時都會在「觸發器」按鈕的每次單擊時產生額外的打印語句（這是您的問題）。使用if，觸發器按鈕上只會有一個事件。

來源

2016-01-04 13:02:58

這種方法將允許我檢查隱藏的div是否已被填充，這意味着我不需要再次等待ajax。但是，每次單擊打印預覽按鈕時，我都必須等到ajax事件已經觸發，因爲這樣會使更新的內容包含在預覽中。打印預覽後，隱藏div的內容將被刪除（因爲它很快就會過期）。 – wf4

防止使用單擊事件添加重複ajaxLoad事件調用

回答

相關問題