0

我有这个代码：

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小提琴在这里

问题是，执行该功能时，第一次单击时输入框不显示，第二次单击后添加了 2 个输入框，再单击几下后，由于奇怪的原因，这些框重复了。我尝试了几乎所有在网上找到的东西，但似乎我还是 jquery 的新手。我很确定我错过了一些小东西。你有什么解决办法吗？

4

5 回答 5

1

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

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

小提琴演示

出现问题是因为您有一个 onclick 事件嵌套在另一个 onclick 事件中。

于 2013-07-05T08:55:13.743 回答
1

从标记中删除onclick()，你在点击里面写点击。

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

小提琴

于 2013-07-05T08:56:09.007 回答
1

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

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

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

演示

于 2013-07-05T08:57:09.703 回答
1

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

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

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

要知道原因检查jQuery.click() 与 onClick。

于 2013-07-05T09:00:17.913 回答
0

试试这个，

<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>
于 2013-07-05T08:58:19.380 回答