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

您可以在再次加载.on() 之前安全地使用.off() 以删除您从加载的同一js 脚本发出的先前.on() 事件处理程序

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

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

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