javascript - 单击应用程序 .on 附加了太多事件

Question

我的单击应用程序由三部分组成；一个页眉、一些内容和一个页脚。

我将菜单保留在头文件中。根据用户的选择，当单击菜单中的某个元素时，如下所示:

<li class="submenu">
    <a href="#">
        <i class="icon-tasks"></i> 
        <span>Timesheet</span> 
        <i class="arrow icon-chevron-right"></i>
    </a>
    <ul>
        <li> <a href="#" id="display_timesheet">Unpaid Hours</a></li>
        <li> <a href="#" id="display_paid_timesheet">Paid Hours</a></li>
    </ul>
</li>    

页面的内容部分将会改变。我在页面内容部分加载的页面之一具有以下代码:

$('#confirm_modal').on('click', '#confirm', function(e) {
    console.log('TEST1');
});

#confirm 模式位于页面的页 footer 分，单击菜单元素时不会重新加载。

问题就在这里。当我单击连续 5 次加载“付费时间”的菜单元素，然后单击 #confirm 按钮时。它将显示 TEST1 五次。我不想要这样。看起来每次我单击菜单的该元素时，它都会重新附加另一个处理程序。我认为我应该使用 .off 但我不确定在哪里或在什么操作上。

谢谢

Answer 1

这是因为 div 或您与 id confirm_modal 一起使用的任何其他 HTML 都放置在页脚中，并且从未像您所说的那样重新加载，并且您添加了 点击处理程序像这样

$('#confirm_modal').on('click', '#confirm', function(e) {
    console.log('TEST1');
});

每次页面内容部分发生更改时。这将为 #confirm_modal 添加一个点击处理程序，如果您点击其中的#confirm，则会触发该处理程序。由于您加载内容页面 5 次，处理程序将附加到 #confirm_modal 5 次，并导致控制台也记录 TEST1 5 次。因此，您需要的是在文档准备就绪或页面加载时添加点击处理程序，而不是每次加载新内容页面时添加

编辑:

是的，您可以使用 .off 取消附加它，如 Kenny answer 中所示，但如果您有权修改脚本，最好在页面加载时附加一次，而不是删除和每次加载新内容时添加处理程序，因为您的处理程序对于加载的每个内容仍然相同。

如果您的点击处理程序对于加载但使用相同按钮的每个内容都不同，这将是一个异常(exception)