Strange append issue

Question

I have this code:

HTML:

<div class="formElement" id="debtors">
    <label> Debtors</label>
    <input type="text" name="debtors">
    <button id="btnClicker" onclick="test()">Append list items</button>
</div>

and jquery:

test= function(){
    var clicked = 0;
    $("#btnClicker").click(function(){
        clicked++;
        $("#debtors").append("<input type=\"text\" name=\"test"+clicked+"\" value=\"test\" />");
      });                       
};

JS fiddle here

The problem is that when the function is executed the input box is not shown at the 1st click and after the 2nd click there are 2 input boxes added and after few more clicks the boxes are duplicated for a strange reason. I tried almost everything that I found online, but it seems that I'm still new in jquery. I'm opretty sure that I'm missing something small. Do you have any fix ideas?

The HTML in your fiddle is different from the question. This makes the answers very confusing, since they refer to an `onclick` attribute that isn't in the question. — Barmar, Jul 05 '13 at 08:59

score 1 · Answer 1 · answered Jul 05 '13 at 08:55

Remove the onclick attribute from the button and everything should work fine like:

var clicked = 0;
$("#btnClicker").click(function () {
    clicked++;
    $("#debtors").append("<input type=\"text\" name=\"test" + clicked + "\" value=\"test\" />");
});

FIDDLE DEMO

Your issue occurred since you had a onclick event nested inside another onclick event.

score 1 · Answer 2 · answered Jul 05 '13 at 08:56

Remove onclick() from mark up, You were writing click inside click.

var clicked = 0;
$("#btnClicker").click(function(){
    clicked++;
    $("#debtors").append("<input type=\"text\" name=\"test"+clicked+"\" value=\"test\" />");
  });

Fiddle

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

Because your event handler does not applies until the user clicks at the button. The onclick="test()" on your code execute the function test() which later holds event handler.

You do not need a function on variable `test` just remove them.

var clicked = 0;
$("#btnClicker").click(function(){
    clicked++;
    $("#debtors").append("<input type=\"text\" name=\"test"+clicked+"\" value=\"test\" />");
});

Demo

score 1 · Accepted Answer · edited May 23 '17 at 12:11

1

You can also remove the .click() from your JS code

test = function () {
    var clicked = 0;
    clicked++;
    $("#debtors").append("<input type=\"text\" name=\"test" + clicked + "\" value=\"test\" />");
}

or remove onclick="test" and keep you .click() script.

To know reason check jQuery.click() vs onClick.

edited May 23 '17 at 12:11

Community

1
1

answered Jul 05 '13 at 09:00

Praveen

50,562
29
125
152

Thank you! This is exactly what I was looking for. – Slim Jul 05 '13 at 09:08
1

@Slim I' glad I was able to help. – Praveen Jul 05 '13 at 10:22

Sherin Jose · Answer 5 · 2013-07-05T09:07:50.203

Try this,

<div class="formElement" id="debtors">
                <label> Debtors</label>
                <input type="text" name="debtors">
                <button id="btnClicker"">Append list items</button>
            </div>

</body>

And the script,

<script>

var clicked = 0;
$("#btnClicker").click(function(){
    clicked++;
    $("#debtors").append("<input type=\"text\" name=\"test"+clicked+"\" value=\"test\" />");
  });                       

</script>

Strange append issue

5 Answers5

You do not need a function on variable test just remove them.

You do not need a function on variable `test` just remove them.