如何在html中顯示div實際上沒有設置爲none的按鈕？

Question

我試着用laravel。點擊按鈕時，我需要顯示相同的div。 我的代碼：

<h6>Other features </h6> 
    <div id="add1"> 
    <input type="text" name="selprice" /> 
    <input type="submit" value="+" id="add"> 
    </div> 

這是我的HTML code.Here，當我點擊按鈕**（即+）**它應該顯示同一div（即ADD1）。

Script代碼：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#add").click(function() { 
     $("#add1").show(); 
     }); 
    }); 
</script> 

這是我都試過了。

Answer 1

在這裏，你去與解決方案https://jsfiddle.net/nuu4ofwu/2/

var cnt = 1; 
 
$(document).on('click', 'input[type=submit]', function(){ 
 
\t cnt++; 
 
    var div = $(this).parent().clone(); 
 
    $('body').append(div); 
 
    $('div:last-child').attr('id', 'add' + cnt); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="add1"> 
 
    <h6>Other features </h6> 
 
    <input type="text" name="selprice" /> 
 
    <input type="submit" value="+" id="add" /> 
 
</div>

Answer 2

1. 如果你是克隆的div使用類，而不是身份證。
2. 使用此背景下，以獲得點擊元素
3. 使用附加到克隆的div添加到容器

$(document).ready(function() { 
 
    $(document).on("click",".add",function() { 
 
    $("#container").append($(this).parent(".add1").clone()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id=container> 
 
    <div class="add1"> 
 
    <h6>Other features </h6> 
 
    <input type="text" name="selprice" /> 
 
    <input type="submit" value="+" class="add"> 
 
    </div> 
 
</div>

更新

$(document).ready(function() { 
 
    $(document).on("click", ".add", function() { 
 
    var clone = '<div class="add1"><input type="text" name="selprice" /><input type="submit" value="+" class="add"></div>'; 
 
    
 
    $("#container").append(clone); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id=container> 
 
    <div class="add1"> 
 
    <h6>Other features </h6> 
 
    <input type="text" name="selprice" /> 
 
    <input type="submit" value="+" class="add"> 
 
    </div> 
 
</div>

Answer 3

你應該定義另一個DIV作爲模板：

HTML：

<div id="template" style="display:none;"> 
     <div id="add_2"> 
      <h6>Other features</h6> 
      <input type="text" name="selprice" /> 
      <input type="submit" value="+" id="add_button_number"></div> 
     </div> 
</div> 

的Javascript：

<script> 
     $('#add').click(function(){ 
      var str = $('#add_2').html(); 
      $('#add1').after(str); 
     }) 

    </script>