jQuery SPA動態創建的元素，多次觸發事件

Question

我使用jquery制作了一些“ SPA界面”，我的主要功能是加載頁面，如下所示：

$('body').on('click', '.go-to', function(event) {
    event.preventDefault();
    var _this = $(this);
    var main_container = $('#main-container');
    main_container.fadeOut('fast');
    $('.preloader').delay(400).fadeIn('slow');
    $.get(_this.attr('href'), { id : _this.attr('data-id') }, function(result) {
        main_container.html(result);
        $('.preloader').fadeOut('fast');
        main_container.delay(1000).fadeIn('slow');
    });
    return false;
});

當我多次加載某些頁面時，加載元素的事件被多次觸發。 例如，當我加載Page1 5次時，此代碼將返回“ Test” 5次。

   $('body').on('click', '#select-all', function(event) {
      console.log('Test');
   });

有人知道如何解決嗎？

Answer 1

你可以放心地使用.off()加載之前.on()再次刪除以前的.on()從同一js腳本出具事件處理您加載

$('body').off('click');
$('body').on('click', '#select-all', function(event) {
      console.log('Test');
   });

http://api.jquery.com/off/

但實際上，為什么需要再次加載事件監聽器？ 我建議您僅將事件監聽器加載一次，因為.on()事件綁定到任何動態生成的元素