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()，以删除您从加载的同一个js脚本发出的上一个.on()事件处理程序

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

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

但作为练习，为什么还需要再次加载事件监听器？ 我建议你只加载事件监听器一次，因为.on()将事件绑定到任何动态生成的元素

jQuery SPA动态创建元素，多次触发事件

1 个答案: