Question

我有一个任务，每按一下按钮，在同一个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，依此类推。

我无法弄清楚代码中的错误或缺失

Answer 1

而不是替换html只需修改按钮的文本

   post=models.ForeignKey(Post,related_name="comments",null=True,on_delete=model.CASCADE)

Answer 2

第一次在文档中出现您要附加click事件的按钮。这就是按钮点击按预期工作的原因。但是动态创建的按钮没有附加事件。

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

使用on()使动态创建的元素按预期工作：

＆＃13;

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

＆＃13;

<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>

＆＃13;

从jquery中迭代地调用div中的函数

2 个答案: