jquery两次添加div

Question

我创建了一个jquery函数，它在其中添加了div和字段。我第一次点击它，它添加了一个div，但是当我第二次点击时它会添加两个div，它应该只添加一个。

我正在做的是，我正在计算div，然后加1，然后附加新计数和字段ID。任何人都可以检查并说明为什么会出现意外行为吗？

＆＃13;

＆＃13;

$(".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>');

});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该只添加新产品，而不是容器div元素。这就是你的反击。

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

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

＆＃13;

＆＃13;

$(".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>');

});

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您附加<div class="product_fields">会导致每次长度增加1。

Answer 3

取消附加product_divs和product_fields并添加其他类。

＆＃13;

＆＃13;

$(".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>');

});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

坚持 $(".product_fields").append

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