Question

我可能会犯这个错误，但这里有。我有一个表单，您填写中间的一个部分，让您添加更多地址与“添加更多”按钮。

我的HTML：

<div class="address">
   <div class="street">
      <input type="text" name="street[]">
   </div>
   <div class="city">
      <input type="text" name="city[]">
   </div>
   <div class="addmoreadd">
      <button type="button" id="addmore">Add More Address</button>
   </div>
</div>

jQuery的：

var rowNum = 0;

$("#addmore").click(function() {
      rowNum++;
      $('.address').attr('id', 'address' + rowNum);
      var html = $('.address').html();
      jQuery('.address').append(html)
      var rm = "<button type='button' class='btn' id='rmbtn'>Remove</button>"
      $('addmoreadd').append(rm);  

      $('#rmbtn').click(function() {
        $('#address' + rowNum).remove();
     }); 
 });

我是jquery的新手所以我还在学习语法和功能但是在这里我试图在每次单击“添加更多地址”按钮时附加额外的地址字段，增加父div <div class="address">通过添加id＃来标识要查找的“删除”按钮的编号。我希望用户只能在第一个默认地址后删除其他地址。

当单击添加更多地址按钮一次时执行此操作，之后它会不断添加更多删除按钮。此外，当添加更多地址字段时，id是相同的（＃address0的行）。

请指导我正确的方向！

编辑：这是我原来的一个例子，它没有使用添加更多电话按钮：

http://jsfiddle.net/F4UhN/

Answer 1

您当前的代码中存在几个问题。其中之一是，正如其他人所说，添加和删除按钮是动态创建的，因此您不能简单地将单击处理程序附加到按钮。您必须在创建按钮时重新附加处理程序，或者将处理程序附加到正文，如@medhi所示：

$("body").on("click", ".addmore", function() { ... });

另一个问题是表单的容器没有为每个地址分别容器。因此，当您复制表单元素时，重复创建已创建的元素 ALL ：每次单击添加时元素的数量加倍。解决方案是将地址表单包装在单独的容器中：

<div id="addresses">
  <div class="address" id="address0">
  ...
  </diV>
  <div class="address" id="address1">
  ...
  </diV>
  ...
</diV>

第三个问题是，当您复制表单时，如果它不是第一个表单，则可能已包含删除按钮。在这种情况下，您应该跳过创建删除按钮。

以下是一个完整的解决方案。

HTML：

<div id="addresses">
    <div class="address" id="address0">
       <div class="street">
           <input type="text" name="street[]" />
       </div>
       <div class="city">
           <input type="text" name="city[]" />
       </div>
       <div class="addmoreadd">
          <button type="button" class="addmore">Add More Address</button>
       </div>
    </div>
</div>

使用Javascript：

var rowNum = 0;

$("body").on("click", ".addmore", function() {
      rowNum++;
      var $address = $(this).parents('.address');
      var nextHtml = $address.clone();
      nextHtml.attr('id', 'address' + rowNum);
      var hasRmBtn = $('.rmbtn', nextHtml).length > 0;
    if (!hasRmBtn) {
      var rm = "<button type='button' class='rmbtn'>Remove</button>"
      $('.addmoreadd', nextHtml).append(rm);
    }
      $address.after(nextHtml); 
 });

$("body").on("click", ".rmbtn", function() {
    $(this).parents('.address').remove();
});

Answer 2

您可以按照与此处显示的内容类似的方式执行。

http://jsbin.com/moweluwu/1/edit

您只需将新地址包装在div中，然后添加一个删除按钮，该按钮会传递与div对应的计数。

var count=1;
$("#add").click(function(){
    var html="<div id='div"+count+"'><input type='text'></input><button onclick=foo('"+count+"')>Remove</button></div>";
    $("#addresses").append(html);

    count++;
});

function foo(which){
    $("#div"+which).remove();
}

Answer 3

您应该使用$("body").on("click", ".addmore", function() { //code here });

参见 DEMO

$("body").on("click", ".addmore", function() {
    rowNum++;
    var row = $("<div id='address-"+rowNum+"' class='address' />");
    var street = $("<div class='street'><input type='text' name='street[]'></div>");
    var city = $("<div class='city'><input type='text' name='city[]'></div>");
    var rm = $("<button type='button' class='addmore'>Add More Address</button>"); 
    $("body").append(row);
    street.appendTo(row);
    city.appendTo(row);
    rm.appendTo(row);

 });

Answer 4

您可以为地址字段设置基本html标记，克隆它并将其附加到“地址容器”。

当用户添加了所有需要的地址时，您可以迭代地址组件并获取值。

Example

<style>
#basicAdress, #manyAddress .addressContainer:first-child .remove{
    display: none;    
}
</style>
<div id="basicAdress">
<div class="addressContainer">
    <p><label>Address</label><input type="text" class="txtAddress"/> <input type="button" class="remove " value="Remove" /></p>    
</div>
</div>

<div id="manyAddress">

</div>
<div>
    <input type="Button" id="addMore" value="Add more" />
    <input type="button" value="Send address" id="sendAddress" />
</div>

<div id="outputAddress">
</div>

<script>
jQuery(document).ready(function(){
jQuery('#basicAdress .addressContainer:eq(0)').clone().appendTo('#manyAddress');


jQuery('.remove').on('click',function(){
    jQuery(this).parent().remove();
});

jQuery('#addMore').click(function(){
    jQuery('#basicAdress .addressContainer:eq(0)').clone().appendTo('#manyAddress');
});

jQuery('#sendAddress').click(function(){
    jQuery('#outputAddress').html('');
    jQuery('#manyAddress .addressContainer').each(function(i, v){
        jQuery('#outputAddress').append(
            "<p>" + (i+1) + '. ' + jQuery(this).children().find('.txtAddress').val()+ "</p>"
        );
    });
});
});

</script>

jQuery，动态追加元素时增加id号

4 个答案: