jquery添加divs两次

Question

我已经创建了一个jquery函数，它添加了一个div以及其中的字段。第一次点击它，它增加了一个div，但是当我第二次点击时，它增加了两个div，它应该只添加一个div。

我在做什么，是我计数的divs，然后加1，然后附加新计数与字段ID。任何人都可以检查并告诉为什么这会给人意想不到的行为？

$(".add_product").click(function(e) { 
 
    e.preventDefault(); 
 
    var div_count = $(".product_fields").length; 
 
    alert(div_count); 
 
    var new_div_count = (div_count + 1); 
 
    $(".product_fields").append('<div class="product_divs"><div class="product_fields"><h5>Item ' + new_div_count + '</h5><div class="input-field"><input type="text" id="item_name_"' + new_div_count + '" name="item_name[]" required><label for="item_name_1">Item Name</label></div><div class="row"><div class="col s4"><div class="input-field"><input type="text" id="item_quantity_"' + new_div_count + '" name="item_quanity[]" required><label for="item_quantity_1">Item Quantity</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_cost_price_"' + new_div_count + '" name="item_cost_price[]" required><label for="item_cost_price_1">Item Cost Price</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_retail_price_"' + new_div_count + '" name="item_retail_price[]"><label for="item_retail_price_1">Item Retail Price</label></div></div></div></div></div>'); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="col s7 product_field_div"> 
 
    <div class="product_divs"> 
 
    <div class="product_fields"> 
 
     <h5>Item 1</h5> 
 
     <div class="input-field"> 
 
     <input type="text" id="item_name_1" name="item_name[]" required> 
 
     <label for="item_name_1">Item Name</label> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col s4"> 
 
      <div class="input-field"> 
 
      <input type="text" id="item_quantity_1" name="item_quanity[]" required> 
 
      <label for="item_quantity_1">Item Quantity</label> 
 
      </div> 
 
     </div> 
 

 
     <div class="col s4"> 
 
      <div class="input-field"> 
 
      <input type="text" id="item_cost_price_1" name="item_cost_price[]" required> 
 
      <label for="item_cost_price_1">Item Cost Price</label> 
 
      </div> 
 
     </div> 
 
     <div class="col s4"> 
 
      <div class="input-field"> 
 
      <input type="text" id="item_retail_price_1" name="item_retail_price[]"> 
 
      <label for="item_retail_price_1">Item Retail Price</label> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 

 
    <div class="action_div"><a href="#" class="add_product">Add new product</a></div> 
 
</div>

Answer 1

您应该只添加新产品，而不是容器div元素。这是抛弃你的计数器。

另外（只是一个旁注）。您不应该使用HTML标题元素（h1 ... h6），因为它们使文本看上去很方便。这是CSS的工作。使用标题来表示连续的部分和子部分。

最后，只有在需要导航时才使用<a>元素。如果您需要点击以触发某个操作，则任何元素都可以支持click事件。在下面的代码中，a已被删除，只有div是可点击的。这也消除了e.preventDefault()的需要。

$(".add_product").click(function(e) { 
 

 
    var new_div_count = ++$(".product").length; 
 
    
 
    // You only want to be appending a new product, not .product_divs or .product_fields 
 
    
 
    $(".product_fields").append('<h1 class="product">Item ' + new_div_count + '</h1><div class="input-field"><input type="text" id="item_name_"' + new_div_count + '" name="item_name[]" required><label for="item_name_1">Item Name</label></div><div class="row"><div class="col s4"><div class="input-field"><input type="text" id="item_quantity_"' + new_div_count + '" name="item_quanity[]" required><label for="item_quantity_1">Item Quantity</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_cost_price_"' + new_div_count + '" name="item_cost_price[]" required><label for="item_cost_price_1">Item Cost Price</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_retail_price_"' + new_div_count + '" name="item_retail_price[]"><label for="item_retail_price_1">Item Retail Price</label></div></div></div>'); 
 

 
});

/* Use the proper heading ranks but style them any way you want. */ 
 
.product { font-size:.75em; font-weight:bold; } 
 

 
/* Make the "Add product" div look like a link without having a link */ 
 
.add_product { 
 
    cursor:pointer; 
 
    text-decoration:underline; 
 
    color:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="col s7 product_field_div"> 
 
    <div class="product_divs"> 
 
    <div class="product_fields"> 
 
     <h1 class="product">Item 1</h1> 
 
     <div class="input-field"> 
 
     <input type="text" id="item_name_1" name="item_name[]" required> 
 
     <label for="item_name_1">Item Name</label> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col s4"> 
 
      <div class="input-field"> 
 
      <input type="text" id="item_quantity_1" name="item_quanity[]" required> 
 
      <label for="item_quantity_1">Item Quantity</label> 
 
      </div> 
 
     </div> 
 

 
     <div class="col s4"> 
 
      <div class="input-field"> 
 
      <input type="text" id="item_cost_price_1" name="item_cost_price[]" required> 
 
      <label for="item_cost_price_1">Item Cost Price</label> 
 
      </div> 
 
     </div> 
 
     <div class="col s4"> 
 
      <div class="input-field"> 
 
      <input type="text" id="item_retail_price_1" name="item_retail_price[]"> 
 
      <label for="item_retail_price_1">Item Retail Price</label> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 

 
    <div class="add_product">Add new product</div> 
 
</div>

Answer 2

要追加<div class="product_fields">造成长度由1每次增加。

Answer 3

采取product_divs和product_fields关闭追加并添加不同的类。

$(".add_product").click(function(e) { 
 
    e.preventDefault(); 
 
    var div_count = $(".fish").length + 1; 
 
    alert(div_count); 
 
    var new_div_count = (div_count + 1); 
 
    $(".product_fields").append('<div class="fish"><h5>Item ' + new_div_count + '</h5><div class="input-field"><input type="text" id="item_name_"' + new_div_count + '" name="item_name[]" required><label for="item_name_1">Item Name</label></div><div class="row"><div class="col s4"><div class="input-field"><input type="text" id="item_quantity_"' + new_div_count + '" name="item_quanity[]" required><label for="item_quantity_1">Item Quantity</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_cost_price_"' + new_div_count + '" name="item_cost_price[]" required><label for="item_cost_price_1">Item Cost Price</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_retail_price_"' + new_div_count + '" name="item_retail_price[]"><label for="item_retail_price_1">Item Retail Price</label></div></div></div></div>'); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col s7 product_field_div"> 
 
    <div class="product_divs"> 
 
    <div class="product_fields"> 
 
     <h5>Item 1</h5> 
 
     <div class="input-field"> 
 
     <input type="text" id="item_name_1" name="item_name[]" required> 
 
     <label for="item_name_1">Item Name</label> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col s4"> 
 
      <div class="input-field"> 
 
      <input type="text" id="item_quantity_1" name="item_quanity[]" required> 
 
      <label for="item_quantity_1">Item Quantity</label> 
 
      </div> 
 
     </div> 
 

 
     <div class="col s4"> 
 
      <div class="input-field"> 
 
      <input type="text" id="item_cost_price_1" name="item_cost_price[]" required> 
 
      <label for="item_cost_price_1">Item Cost Price</label> 
 
      </div> 
 
     </div> 
 
     <div class="col s4"> 
 
      <div class="input-field"> 
 
      <input type="text" id="item_retail_price_1" name="item_retail_price[]"> 
 
      <label for="item_retail_price_1">Item Retail Price</label> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 

 
    <div class="action_div"><a href="#" class="add_product">Add new product</a></div> 
 
</div>

Answer 4

的 $(".product_fields").append

使用$(".product_field_div > .action_div").before