添加格上动态使用jQuery

我想补充的div结构每次按一下按钮我点击按钮添加使用jQuery添加格上动态使用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>

来源

2014-09-29 user3667305

你加载jQuery的？你会得到什么错误信息？ – sideroxylon 2014-09-29 11:59:20

不工作意味着？它能做什么？ – 2014-09-29 11:59:48

我没有得到错误消息我正在使用括号源代码编辑器 – user3667305 2014-09-29 11:59:49

则必须在其内部$(document).ready()块jQuery代码如下所示： -

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

或

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

最后不要忘了在你的页面上添加jQuery库文件。

注意： - 当我们动态地将html添加到DOM时，通常应使用第二个答案，否则使用第一个答案。

Working Demo

来源

2014-09-29 11:56:37

@downvoter关心评论plz。 – 2014-09-29 11:57:30

（不是downvoter），但这会有什么不同？ – Azrael 2014-09-29 12:00:51

@ Azrael..jquery代码应该放在'document.ready'块中..plz仔细阅读文档... – 2014-09-29 12:03:39

您需要添加 “返回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 Example

来源

2014-09-29 12:02:20 Ariadna

您的代码工作正常here。此外，我简化了你的代码，如下所示。

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

来源

2014-09-29 12:03:50

如果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”提供。

来源

2014-09-29 12:39:44 Sreeraj

添加格上动态使用jQuery

回答

相关问题