奇怪的追加问题

Question

我有这段代码：

HTML：

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

和jquery：

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

JS fiddle here

问题在于，当执行该功能时，第一次点击时不显示输入框，第二次点击后，添加了2个输入框，经过几次点击后，由于一个奇怪的原因，复制了这些框。我尝试了几乎所有我在网上找到的东西，但似乎我仍然是jquery的新手。我很确定我错过了一些小事。你有任何解决方法吗？

Answer 1

从按钮中删除onclick属性，一切都应该正常工作：

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

FIDDLE DEMO

您的问题发生在您将onclick事件嵌套在另一个onclick事件中之后。

Answer 2

从标记中删除onclick()，您正在点击内部点击。

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

Fiddle

Answer 3

因为在用户点击按钮之前，您的事件处理程序不适用。代码上的onclick="test()"执行函数test()，后面会保存事件处理程序。

您不需要变量test上的函数只需删除它们。

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

Demo

Answer 4

您也可以从JS代码中删除.click()

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

或删除onclick="test"并保留.click()脚本。

了解原因检查jQuery.click() vs onClick。

Answer 5

试试这个，

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

</body>

脚本，

<script>

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

</script>