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

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())
}) 

每次刷新页面时都会执行

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