javascript - 下拉按钮单击一次但运行多次

Question

我有这个 HTML 代码(使用 Bootstrap)

<div class='dropdown'>
    <button class='btn btn-primary dropdown-toggle' type='button' data-toggle='dropdown'>Choose to do sth</button>
    <ul class='dropdown-menu'>
        <li><a href='#' class='do-sth'>Eat</a></li>
        <li><a href='#' class='do-sth'>Play</a></li>
        <li><a href='#' class='do-sth'>Sleep</a></li>
    </ul>
</div>

我的 JavaScript 代码

$(".do-sth").click(function() {
    alert($(this).text())
})

代码本身运行良好。然而，它包含在更复杂的代码中。页面可以用ajax刷新，但是这个下拉列表的部分没有刷新。

刷新页面时，如果我单击下拉选项之一，警报框将显示两次。然后，如果我再次刷新页面并单击下拉选项之一，警报框将显示三次。等等

有人知道为什么会发生这种情况吗？如果我每次刷新页面时重新生成这个下拉按钮代码部分，它似乎就会得到修复，但我真的不想这样做。

非常感谢!

Answer 1

在没有看到其余代码的情况下，很难 100% 确定，但几乎可以肯定您提到的代码:

$(".do-sth").click(function() {
    alert($(this).text())
}) 

每次刷新页面时都会执行

，并向页面添加越来越多的事件处理程序。如果您多次运行此代码，它会不断添加越来越多的事件处理程序，它不会覆盖您之前声明的事件处理程序。