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