使用jQuery在按鈕單擊上動態添加div

Question

我想每次單擊按鈕以使用jQuery添加地址時添加div結構

<div id="container">
      <div class="address">
           <div class="input-reg rb-item input-group">
                 <span class="input-group-addon">Address </span>
                 <input type="text" class="form-control" placeholder="Insert text here">
           </div>
           <div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div>
       </div>
</div>
<div align="center" style="margin-top: 10px"><button id="btnAddAddress" class="btn btn-warning btn-md" type="button">Add Address</button></div>

這是我嘗試過但無法正常工作的

<script type="text/javascript">
    $("#btnAddAddress").click(function () {
      $("#container").append('<div class="address"><div class="input-reg rb-item input-group"><span class="input-group-addon">Address </span><input type="text" class="form-control" placeholder="Insert text here"></div><div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div></div>');
    });
</script>

Answer 1

您必須將jquery代碼封裝在$（document）.ready（）塊中，如下所示：

$(document).ready(function(){
  //Jquery code here
});

要么

$(document).on('click', '#btnAddAddress', function() 
{...});

最后，不要忘記在頁面上添加jquery庫文件。

注意：-當我們將html動態添加到DOM時，通常應使用第二個答案，否則使用第一個答案。

工作演示

Answer 2

如果將js代碼寫在按鈕后面，則您提供的代碼將可以進行任何修改。 即

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="address"> <div class="input-reg rb-item input-group"> <span class="input-group-addon">Address </span> <input type="text" class="form-control" placeholder="Insert text here"> </div> <div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div> </div> </div> <div align="center" style="margin-top: 10px"><button id="btnAddAddress" class="btn btn-warning btn-md" type="button">Add Address</button></div> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> $("#btnAddAddress").click(function () { $("#container").append('<div class="address"><div class="input-reg rb-item input-group"><span class="input-group-addon">Address </span><input type="text" class="form-control" placeholder="Insert text here"></div><div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div></div>'); }); </script> 

在執行代碼之前，請確保已加載按鈕和jquery。 最好的選擇是“ Kartikeya”。

Answer 3

您需要添加“ return false;”。 在點擊功能結束時。

$("#btnAddAddress").click(function () {
   $("#container").append('<div class="address"><div class="input-reg rb-item input-group"><span class="input-group-addon">Address </span><input type="text" class="form-control" placeholder="Insert text here"></div><div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div></div>');
   return false;
});

JSFiddle示例

Answer 4

您的代碼在這里工作正常。 我也簡化了您的代碼，如下所示。

$("#btnAddAddress").click(function () {
     $("#container").append($(".address").html());
});