jquery divsを2回追加する

Question

divをフィールド内に追加するjquery関数を作成しました。初めてクリックすると1つのdivが追加されますが、2回目にクリックすると2つのdivが追加され、1つしか追加されません。

私がやっていることは、divを数えてから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

あなたは長さが1ずつ増加させる<div class="product_fields">を追加しています。

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