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

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

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

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