Javascript 从jquery在div内迭代调用函数_Javascript_Jquery

Javascript 从jquery在div内迭代调用函数

javascript jquery

Javascript 从jquery在div内迭代调用函数,javascript,jquery,Javascript,Jquery,我有一个任务，每次点击按钮，都会在同一个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(){ $("#btn

我有一个任务，每次点击按钮，都会在同一个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>


$（文档）.ready（函数（）{
$（“#btn2”）。单击（函数（）{
log（“functionCalled”）；
var num=$（“#numChange”）.text（）；
var numInc=num+“1”；
var output=“你好，世界！设置HTML”+numInc+“”
$（“#changeMe”）.html（输出）；
});
});
这是一个段落
设置HTML
1

单击按钮一次，文本从1变为11，但在第二次单击后将不再发生任何变化。我希望每次单击按钮时它都会不断更改，即它应该更改为111，然后单击下一步1111，依此类推

我无法找出代码中的错误或缺失，而不是替换html，只需修改按钮的文本即可

var num = $("#numChange").text() + "1";
$("#numChange").text(numInc);

文档中首次出现了附加

单击事件的按钮。这就是为什么点击按钮能按预期工作的原因。但是动态创建的按钮没有附加事件
委派事件的优点是，它们可以处理来自子元素的事件，这些子元素将在以后添加到文档中
用于动态创建的元素按预期工作：
$（文档）.ready（函数（）{
$（文档）.on（'click'，'btn2'，函数（）{
log（“functionCalled”）；
var num=$（“#numChange”）.text（）；
var numInc=num+“1”；
var output=“你好，世界！设置HTML”+numInc+“”
$（“#changeMe”）.html（输出）；
});
});

这是一个段落
设置HTML
1
您需要委派：更改$（“#btn2”）。单击（..
到$（“#changeMe”）。在（“单击”，“#btn2”，函数…
或更好：不要更改按钮：$（“#btn2”）。单击（函数（）{console.log（“函数调用”）；var num=$（“#numChange”）。text（）；var num=num+“1”；（#numchangeminc）text（）；}）；
谢谢你的评论。这非常有帮助：）@mplungjan在你发布链接后，我也认为这是一个重复的问题，但我不会删除这个问题，因为其他人可能会查看这个问题，并且可能会对他们有所帮助。它真的，真的不值得保留。有数千个相同的问题。请看我在10秒内列出的列表。现在它无法删除，因为它有一个已接受的名称回答……使用10k，您可以轻松地完成与被复制者相同的操作-也可以委托给closer$（“#changeMe”）