Calling a function iteratively inside a div from jquery

Question

I have a task for which on every click of the button some text is added or updated in the same div.

I have created a dummy code :

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

On one click of button, the text changes from 1 to 11, but nothing happens on second click and henceforth. I want it to keep changing everytime I click the button, i.e. it should change to 111, then next click 1111 and so on.

I am not able to figure out whats wrong or missing in the code

You need to delegate: Change `$("#btn2").click(....` to `$("#changeMe").on("click","#btn2",function...` — mplungjan, May 16 '18 at 08:27
OR better: Do NOT change the button: `$("#btn2").click(function(){ console.log("functionCalled"); var num = $("#numChange").text(); var numInc = num + "1"; $("#numChange").text(numInc); });` — mplungjan, May 16 '18 at 08:29
@mplungjan after you posted the link, i also think this is a duplicate, but I am not deleting the question as someone else might look through this and may be helpful for them. — Dreams, May 16 '18 at 08:36
It is really, really not worth keeping. There are thousands of identical questions. See the list I made in 10 seconds. And now it cannot be deleted because it has an accepted answer... — mplungjan, May 16 '18 at 09:03

score 0 · Answer 1 · answered May 16 '18 at 08:25

0

Instead of replace html just modify the button's text

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

answered May 16 '18 at 08:25

farkasnorbert90

41
4

Mamun · Accepted Answer · 2018-05-16T13:59:26.553

For the first time the button on which you are attaching the click event is present in the document. That's why the button click works as expected. But the button created dynamically does not have the event attached to it.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

Use on() for dynamically created element to work as expected:

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

With 10k you could easily close as the dupe it is - also delegate to the closer $("#changeMe") — mplungjan, May 16 '18 at 08:33

Calling a function iteratively inside a div from jquery

2 Answers2