如何在动态加载的脚本中使用jQuery on()

Question

如果我有以下html:

<html>
   <div id="main_content">
      <button>click me</button>
      <script src="main.js" ></script>
   </div>
</html>

和main.js:

$('#main_content').on('click', 'button', function() {
    console.log('you clicked');
});

如果我执行整页加载,则单击该按钮仅注册一个控制台消息.但是,如果我随后main_content's通过AJAX请求重新加载内容,则每次单击按钮都会发出2条控制台消息.它将为每个后续的AJAX加载提供3,4,5 ...消息,但总是一个用于整页重新加载.

有人可以解释这种行为并提出可行的解决方案吗？

Answer 1

那是因为你正在加载main.js的多个副本,因此每次都要附加一个事件处理程序.
每次加载时,<script>都会附加一个处理程序

 <button>click me</button>
  <script src="main.js" ></script>

这里的教训是解析由ajax加载的脚本,因此如果你在其中有处理程序,它们就会被附加