Javascript 单击应用程序。on会附加太多事件

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

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

<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>    

#确认模式位于页面的页脚部分，单击菜单元素时不会重新加载

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

---

谢谢

这是因为

div

或您使用的id

confirm\u modal

的任何其他HTML被放置在您的页脚中，并且不会像您所说的那样重新加载，您可以像这样添加

点击处理程序

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

每次更改页面的内容部分时。这将为

#confirm(确认)模式

添加一个

单击处理程序

，如果您在其内部单击

#confirm

，则会触发该操作。由于加载内容页5次，处理程序将连接到

#confirm_modal

5次，并使控制台记录

TEST1

5次。因此，您需要在

文档准备

或

页面加载

上添加一次

点击处理程序

，而不是每次加载新的内容页面

编辑： 是的，您可以像中一样使用

.off

取消附加它，但是如果您有权修改脚本，最好在

页面加载
时只附加
一次，而不是每次加载新内容时删除
和
添加
处理程序
，因为您的
处理程序对于加载的每个内容仍然是相同的

但是，如果您的点击处理程序对于加载的每个内容都不同，但使用相同的按钮，这将是一个例外，这是因为您使用的id
确认模式
的
div
或任何其他HTML被放置在您的页脚中，并且不会像您所说的那样重新加载，您可以像这样在click handler上添加

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

每次更改页面的内容部分时。这将为
#confirm(确认)模式
添加一个
单击处理程序
，如果您在其内部单击
#confirm
，则会触发该操作。由于加载内容页5次，处理程序将连接到
#confirm_modal
5次，并使控制台记录
TEST1
5次。因此，您需要在
文档准备
或
页面加载
上添加一次
点击处理程序
，而不是每次加载新的内容页面

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

但是，如果您的点击处理程序对于加载的每个内容都不同，但使用相同的按钮，则这将是一个例外，我认为这可能有助于您添加一行内容

     $('#confirm_modal').off('click', '#confirm')

以前

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

像这样

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

我想这可能会帮你增加一行

     $('#confirm_modal').off('click', '#confirm')

以前

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

像这样

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

每次内容更改时，您都会在上注册一个新的单击处理程序

使用而不是。
绑定处理程序仅一次

试试这个-

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

更新：-

每次内容更改时，您都会在上注册一个新的单击处理程序

使用而不是。
绑定处理程序仅一次

试试这个-

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

更新：-

尝试
.one（）
而不是
。on（）
请显示连接处理程序的代码。您对多次附加处理程序的猜测听起来像是个问题。您可以将一些代码附加到对话框的
hide
事件（假设它有一个）以调用所需元素的
off（）
。@DevlshOne如果模态中的按钮能够被多次单击会怎么样？@rorymcrossan这是一个很好的假设，但是由于OP对此非常模糊，我建议使用
.one（）
。可能是他正在DOM中冒泡，只需要
e.stopPropagation（）
。尝试
.one（）
而不是
。on（）
请显示连接处理程序的代码。您对多次附加处理程序的猜测听起来像是个问题。您可以将一些代码附加到对话框的
hide
事件（假设它有一个）以调用所需元素的
off（）
。@DevlshOne如果模态中的按钮能够被多次单击会怎么样？@rorymcrossan这是一个很好的假设，但是由于OP对此非常模糊，我建议使用
.one（）
。这可能是因为他正在DOM中冒泡，只需要
e.stopPropagation（）
就可以了。是否可以使用.off取消连接？@user1029829如果只在DOMReady上连接，就不需要使用
off（）
-因为它只会被附加一次。是否仍然可以使用.off取消附加？@user1029829如果只在DOMReady上附加它，则不需要使用
off（）
-因为它只会被附加一次。