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

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>