JavaScript 每次点击都会触发多次按钮点击事件

Question

我有一个 JavaScript/jQuery 应用程序，其中 Bootstrap 模式 window 在单击下图中的任何订单卡时打开。

在模式 HTML 中，我有一个 Start Timer 按钮

此计时器按钮在 DOM 已加载后添加到 DOM。所以我使用下面的代码在 DOM 加载后将点击事件附加到按钮...

// Handle Timer Start Button click event
$(document).on('click', '.start-job-btn', function(e) {

    console.log('start timer');
    alert('start timer');

    e.preventDefault(); // prevents default
    return false;

});

HTML

<a href="#" data-order-id="5508" data-order-item-id="158" class="btn btn-primary start-job-btn">Start Job</a>

问题

当我点击开始按钮时，我得到警报和控制台记录器运行每个按钮点击 3-6 次！

我不明白为什么会发生这种情况，因为它不会发生在应用程序的任何其他部分。只有这个按钮，上面显示了代码。

很难设置演示应用程序，因为该项目超过 10k 行并且很难全部完成，但是基于此信息有人有任何想法吗？

Answer 1

根据您的最新评论，我在这里看到了两种可能的解决方案。首先，将您以前的代码仅放在将加载模式的页面中。无需在每次调用时都绑定事件。每次打开模式时，您都会将一个新函数绑定到同一事件。

你提到了 jquery 关闭方法，这也行得通：

$(document).off('click', '.start-job-btn');
$(document).on('click', '.start-job-btn', function(e) {
    console.log('start timer');
    alert('start timer');
    e.preventDefault(); // prevents default
    return false;
});

Answer 2

每次创建模态时，您都在运行调用代码，因此所有按钮都会获得多个点击处理程序——每个模态一个。

您应该将该代码从创建模态的代码中删除，这样您只需要运行它一次。或者您应该更改它，以便它仅绑定到该模式中的按钮：

this_modal.on("click", ".start-job-btn", function() {
    ...
});

其中 this_modal 是对正在创建的当前模态的引用。

JavaScript 每次点击都会触发多次按钮点击事件

JavaScript button click even is firing multiple times per click

javascript

jquery

onclick

jquery-events