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模式位于页面的页脚部分，单击菜单元素时不会重新加载。

这是问题所在。当我单击连续5次加载“付费时间”的菜单元素，然后单击#confirm按钮。它将显示TEST1五次。我不希望这样。看起来每次我点击菜单中的那个元素时，它都会重新连接另一个处理程序。我认为我应该使用.off但我不确定在哪里或采取什么行动。

由于

Answer 1

这是因为div或您使用ID为confirm_modal的任何其他HTML都放在页脚中，并且从未按照您的说法重新加载，并添加on click handler这样的< / p>

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

每次更改页面的内容部分。这将为on click handler添加#confirm_modal，如果您点击其中的#confirm，则会触发该#confirm_modal。由于您加载内容页面5次，处理程序将连接到TEST1 5次并导致控制台也记录on click handler 5次。因此，您需要在document ready或page load上添加.off一次，而不是每次加载新内容页时都添加

编辑：

是的，您可以使用Kenny answer中的attach取消附加，但如果您有权修改脚本，最好page load removing adding每次加载新内容时，handler和handler代替on click handler而{{1}}，因为每个加载的内容的{{1}}仍然相同。

如果你的{{1}}对于每个加载但使用相同按钮的内容有所不同，那将是一个例外

Answer 2

我认为这可能会帮助您添加一行

     $('#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');
});

Answer 3

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

使用jQuery.One()代替jQuery.on()。 jQuery.One()只绑定处理程序一次。

试试这个 -

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

<强>更新： -

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

3 个答案:

编辑：

DEMO