Добавить DIV динамически на кнопку мыши с помощью JQuery

Question

Я хочу, чтобы добавить структуру DIV каждый раз я нажимаю на кнопку, чтобы добавить адрес, используя jQuery

<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, в противном случае используйте первый ответ.

Working Demo

Answer 2

Вам нужно добавить "вернуться ложным;" в конце функции щелчка.

$("#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 Example

Answer 3

Ваш код работает отлично here. Также я упростил ваш код, как показано ниже.

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

Answer 4

Код, указанный вами, будет работать без каких-либо изменений, если код 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 загружается, прежде чем ваш код выполняется. Самый лучший вариант - «Картикея».