Question

我正在尝试构建一个jQuery函数，当单击一个按钮时会创建七个输入字段。这应该只允许一次，而不是每次按下按钮。

目前我有以下代码创建一个文本字段，但问题是每次按下按钮时都会添加更多文本字段。通过创建这些文本字段，我可以使用它们在我的数据库中添加记录。例如，通过单击addbutton，将创建文本字段，用户可以输入信息。

$("#addbutton").bind("click", function() { 
    var textarea = $('<input type="text" name="firstname">',);
    $('#textfields').append(textarea);
});

由于

Answer 1

您只能使用one()触发事件处理程序一次，只需附加所需的按钮，我正在使用一组名称和$.map来创建它们

$("#addbutton").one("click", function() {

     var buttons = [
         'firstname',
         'lastname',
         ..... etc
     ];

     $('#textfields').append(
         $.map(buttons, function(_name) {
             return $('<input />', { name : _name })
         })
     );
});

FIDDLE

Answer 2

根据您在评论中的聊天，您需要一个按钮：

点击后，它会创建七个输入字段，并将它们附加到您的#textfields元素。
创建字段后，不允许该按钮再创建输入字段。

我基于这种解释设计了以下解决方案：

$("#addbutton").click(function(){
  for(var i = 0; i < 7; ++i){
    $('#textfields').append('<input type="text" name="firstname">');
  }
  $(this).prop("disabled", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addbutton">Click Me</button>
<div id="textfields"></div>

长话短说，第一次点击后按钮被禁用。这可以防止您或任何人使用按钮执行任何其他操作。

或者你可以创建一个全局变量作为一个标志，通过用if语句包装输入创建代码来帮助阻止创建更多的输入字段： var inputFieldsCreated = false;

$("#addbutton").click(function(){
  if(inputFieldsCreated === false){ 
    for(var i = 0; i < 7; ++i){
      $('#textfields').append('<input type="text" name="firstname">');
    }
    inputFieldsCreated = true;
  }
});

请在下面的评论中告诉我这是否适合您。

Answer 3

仅仅因为我不喜欢将JQuery用于这么简单/简单/简单的事情，这里是纯JavaScript的代码：

document.getElementById("btn").addEventListener("click", onClick, false);

function onClick() {
    var textfield, br;
    for(var i=0 ; i<7 ; i++) {
        textfield = document.createElement("input");
        br = document.createElement("br");
        textfield.id = "txt_"+i;
        document.getElementById("textFields").appendChild(textfield);
        document.getElementById("textFields").appendChild(br);
    }
    this.parentElement.removeChild(this);
}

cou可以在这里测试一下： https://jsfiddle.net/v91v7afa/

当然，您可以disable而不是删除按钮，但重新启用它会非常容易。或者你可以remove the listener。

Answer 4

var numText=1;
$("#addbutton").on("click",function(e){
      e.preventDefault();
      numText++;
      $('#textfields').append('<input type="text" name="firstname" />');
      if (numText==7)
          $(this).off('click')

});

JQuery触发一次按钮点击

4 个答案: