Question

我有这个输入字段，

<div class="col-md-3">
  <strong>Field</strong>
  <input type="text" class="form-control load_field" name="field1">
  <br>
</div>

每当点击这个我想让另一个字段出现在这下面时，我明白这将通过编辑：

我已经这样做了，

    $(".load_field").click(function()
  {
    console.log("this");


       // document.getElementById('form').innerHTML+=getFormColumn(i);

      document.getElementById('form').innerHTML+="<div class='col-md-3'><strong>Field</strong> <input type='text' class='form-control load_field' name='field1'><br></div>";


    });

它第一次起作用，意味着它在此下方显示另一个输入字段但只显示一次，我希望每次单击输入字段时都能工作。我还缺少什么吗？

Answer 1

这就是你想要的

＆＃13;

$(".load_field").click(function() {
  var html = '<input type="text" class="form-control load_field" name="field1"><br>';
  $(".col-md-3").append(html);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
  <strong>Field</strong>
  <input type="text" class="form-control load_field" name="field1">
  <br>
</div>

＆＃13;

Answer 2

尝试使用以下代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".load_field").click(function(){
        $(".col-md-3").append('<input type="text" class="form-control load_field" name="field1"><br/><br/>');
    });
});
</script>
</head>
<body>

<div class="col-md-3">
  <strong>Field</strong>
  <input type="text" class="form-control load_field" name="field1">
  <br>
</div>
</body>
</html>

在此单击文本框时。我们将在您的div中附加新的文本框。

Answer 3

尝试放置代码块我没有执行此代码，但逻辑将保持不变感谢

<div class="col-md-3"> <strong>Field</strong> <input type="text" class="form-control load_field" name="field1"> <div id="hidden" class="col-md-3" style="display:none;"> <input type="text" class="form-control load_field" name="field1"> </div> <br> </div> $(".load_field").click(function() { $("#hidden").display(visible); }

Answer 4

使用显示/隐藏功能显示或隐藏html内容。

<div class="col-md-3">
  <strong>Field</strong>
  <input type="text" class="form-control load_field" name="field1">
   //your new Field  
   <input type="text" class="form-control load_field" name="newField" id="newField" style="display:none">
  <br>
</div>
/*Your Js will look like */
$(".load_field").click(function()
$("#newField").show();

单击输入字段时会出现另一个输入字段

4 个答案: