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 class="address">通过添加id#来增加父div 以识别"删除"按钮的编号.我希望用户只能在第一个默认地址后删除其他地址.

当单击添加更多地址按钮一次时执行此操作,之后它会不断添加更多删除按钮.此外,当添加更多地址字段时,id是相同的(#address0的行).

请指导我正确的方向!

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

http://jsfiddle.net/F4UhN/

Answer 1

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

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

另一个问题是表单的容器对于每个地址没有单独的容器.因此,当您复制表单元素时,您将复制已创建的所有元素:每次单击添加时元素的数量加倍.解决方法是将地址表单包装在单独的容器中:

<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();
});