我有一个任务，每次单击按钮时，都会在同一div中添加或更新一些文本。
我创建了一个虚拟代码：
<!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";
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>
单击一下按钮，文本从 1 变为 11，但在第二次单击和此后没有任何反应。我希望每次单击按钮时它都会不断更改，即它应该更改为 111，然后接下来单击 1111，依此类推。
我无法弄清楚代码中有什么错误或缺失
文档中首次出现附加click事件的按钮。这就是按钮单击按预期工作的原因。但是动态创建的按钮没有附加事件。
委托事件的优点是，它们可以处理以后添加到文档中的后代元素中的事件。
使用on()使动态创建的元素按预期工作：
$(document).ready(function(){
$(document).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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="test1">This is a paragraph.</p>
<div id="changeMe">
<button id='btn2'>Set HTML</button>
<p id='numChange'>1</p>
</div>与其替换html，不如修改按钮的文本
var num = $("#numChange").text() + "1";
$("#numChange").text(numInc);