jQuery，动态追加元素时增加id号 [英] jQuery, increment id number when dynamically appending elements

问题描述

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

I'm probably going about this wrong but here goes. I have a form that you fill out with a section in the middle that lets you add more addresses with an "add more" button.

我的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的新手，所以我还在学习语法和功能但是我在这里尝试在每次点击添加更多地址按钮时附加额外的地址字段，通过添加id＃来增加父div < div class =address> 确定要找到的删除按钮的编号。我希望用户只能在第一个默认地址后删除其他地址。

I'm new to jquery so I'm still learning syntax and function but here I am trying to append the extra address fields on each click of the "add more address" button, increment the parent div <div class="address"> by adding an id # to identify the number for the Remove button to locate. I want the user to be able to only remove additional addresses after the first default address.

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

This executes ok when the add more address button is clicked once, afterwards it keeps adding more Remove buttons next to each other. Also when adding more address fields the id's are the same (rows of #address0).

请指引我正确的方向！

编辑：这是我原来的例子使用添加更多电话按钮：

Here is the original example that I had that wasn't working with an add more phone button:

http：/ /jsfiddle.net/F4UhN/

推荐答案

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

There are several problem in your current code. One of them is that, as stated by others, the add and remove buttons are created dynamically, so you cannot just simply attach the click handler to the button. You have to either re-attach the handler anytime you create a button, or attach the handler to the body as shown by @medhi:

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

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

One other problem is that the container of the form has no separate container for each address. So when you duplicate the form elements, you duplidate ALL the elements already created: the number of elements double each you click on add. A solution to this is to wrap the address forms in separate containers:

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

还有三分之一的问题是，当您复制表单时，它可能已经包含一个删除按钮不是第一种形式。在这种情况下，您应该跳过创建删除按钮。

And one third problem is that when you duplicate an form, it may already contain a delete button if it is not the first form. In that case you should skip the delete button creation.

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

Below is a complete working solution.

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：

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

这篇关于jQuery，动态追加元素时增加id号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！