CODEWITHSUNDEEP
jqueryhtmlappend
Slim
Slim

Reputation: 1744

Strange append issue

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?

Upvotes: 0

Views: 58

Answers (5)

Sherin Jose
Sherin Jose

Reputation: 2526

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>

Upvotes: 0

Praveen
Praveen

Reputation: 56501

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.

Upvotes: 1

Starx
Starx

Reputation: 78971

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

Upvotes: 1

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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

Upvotes: 1

palaѕн
palaѕн

Reputation: 73896

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.

Upvotes: 1

Related Questions