July 5, 2013
Strange append issue
Slim’s 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" />");
});
};
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?
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.
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" />");
});
