jQuery点击按钮迭代更新div内容失效问题求助

你的问题核心在于动态生成的按钮没有绑定点击事件：第一次点击按钮时，你通过$("#changeMe").html(output)完全替换了changeMe容器内的内容，包括原来的btn2按钮。而你最初的点击事件是绑定在页面加载时存在的那个btn2上的，新生成的btn2并没有被绑定事件，所以后续点击就没反应了。

另外，你用$("#numChange").text()获取到的是字符串，所以num + "1"做字符串拼接是符合你需求的（持续追加"1"），这部分没问题。

下面给你两种可行的解决方案：

方案一：使用事件委托（推荐处理动态元素） #

把点击事件绑定到changeMe这个父容器上，监听内部btn2的点击。这样不管按钮是初始存在的还是后续动态生成的，都能触发事件：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // 事件委托：绑定到父元素，监听btn2的点击
  $("#changeMe").on("click", "#btn2", function(){
    console.log("functionCalled");
    var num = $("#numChange").text();
    var numInc = num + "1";
    var output = "<b>Hello world!</b><button id='btn2'>Set HTML</button><p id='numChange'>" + numInc + "</p>";
    $("#changeMe").html(output);
  });
});
</script>
</head>
<body>
<p id="test1">This is a paragraph.</p>
<div id="changeMe">
  <button id='btn2'>Set HTML</button>
  <p id='numChange'>1</p>
</div>
</body>
</html>

方案二：只更新需要修改的内容（更高效） #

其实你不需要每次都替换整个容器的内容，只需要更新numChange的文本，以及保留原来的按钮即可。这样原来的按钮不会被替换，事件绑定依然有效：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn2").click(function(){
    console.log("functionCalled");
    var num = $("#numChange").text();
    var numInc = num + "1";
    // 只更新numChange的文本，不需要重新生成按钮
    $("#numChange").text(numInc);
    // 如果需要保留<b>Hello world!</b>，可以提前放在div里，不用每次生成
  });
});
</script>
</head>
<body>
<p id="test1">This is a paragraph.</p>
<div id="changeMe">
  <b>Hello world!</b>
  <button id='btn2'>Set HTML</button>
  <p id='numChange'>1</p>
</div>
</body>
</html>

第二种方案更简洁高效，因为它避免了重复生成DOM元素，减少了不必要的DOM操作，推荐使用这种方式。

内容的提问来源于stack exchange，提问作者Dreams