克隆后带有隐藏表单的Jquery下拉菜单不起作用

Question

我有一个带有下拉菜单的表单，其中包含食品名称，另一个带有输入字段以允许用户输入价格。在此之下，我有另一个下拉菜单class="IfNotAvailableSelectable"，其中包含 3 个选项，值：0、1、2。 我有一个名为“addMore”的按钮，可以用class="divContainer"克隆div中的所有内容

以下是我想要实现的目标：

1.当用户点击“addmore”按钮时，它应该使用class="divContainer"克隆div中的所有内容，并将其附加到带有class="addMoreContent".的div中，其中我已经能够成功完成。

2.当用户使用class="IfNotAvailableSelectable" 和value =0 选择下拉菜单时，它会显示带有class="thenBuy" 的div，否则它应该隐藏它。 现在面临的问题是，每当我单击 addmore 按钮并选择选项值为 1 或 0 或 2 的下拉菜单时，原始克隆的 div 也会随之更改，

所以例如：如果我选择值 1，我希望带有 class="thenBuy" 的 div 隐藏，但是当在 addmore 按钮上，并选择 value = 0 的下拉列表时，它会显示带有 class="thenBuy" 的 div在第一个也是，虽然我不想要它。 请提供帮助，或者如果有更好的解决方案。将不胜感激。谢谢 HTML：

$(document).ready(function () {

  //clone
var divContainer = $(".divContainer");
var addMoreContent = $(".addMoreContent");
var addMoreBtn = $(".addMoreBtn");
  var removeItem = $(".removeItem");
  addMoreBtn.click(function () {



    divContainer.clone(true).appendTo(addMoreContent);
    

  });

  removeItem.click(function (e) {
    $(this).closest('div').remove();
    e.preventDefault();
  });
  
  //then buy functionO(when user selects "buy alternative")
  $(document).on('change', '.IfNotAvailableSelectable', function () {


    console.log($(this).val())
    var MainNav = $(this).val();

    if (MainNav == 0) {
      $(".thenBuy").show();
    } else {
      $(".thenBuy").hide();
    }


  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- card body-->
<div class="card-body bg-white divContainer" >
   <!-- delete button -->
<button type="button" class="close col-1 bg-white removeItem" >
          <span>×</span>
        </button>
  <!-- items -->
<select class=" custom-select text-capitalize">
  <option  >Waakye </option>
  <option >Banku</option>
  <option >Plain Rice</option>
</select>
<br>
<br>
<!-- price -->
  <div >
    <input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " > 
    <!-- "min" above should be the value of the  starting price of the selected item  and placeholder strating price should be the value of the starting price of the selected item too-->
    </div>
    <br>
<!-- if item is not available --> 
<div  style="font-size: medium;" >
<select  class="custom-select  text-capitalize IfNotAvailableSelectable">
  <option value="0" >If item is not available</option> 
  <option value="1" >Remove it from my order </option>
  <option value="2">Cancel entire order</option>
</select>
<br>
<!-- then buy -->
<div class="thenBuy"   >
<div>
 <span>Then Buy</span>
<select class=" custom-select text-capitalize">
  <option >Waakye </option>
  <option >Banku</option>
  <option >Plain Rice</option>
</select>
</div>
<br>
<!-- price -->
  <div >
    <span>Price</span>
    <input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " > 
    <!-- "min" above should be the value of the  starting price of the selected item  and placeholder strating price should be the value of the starting price of the selected item too-->
    </div>
  </div>
 </div>
<!-- end of card body -->
</div>
<br>
<div  class="addMoreContent" ></div>
<!-- onclick of add more,display the fiels here -->
<button  type="button" class="float-right btn btn-outline-dark btn-sm addMoreBtn">Add More</button> 
<br>

Answer 1

• 使用$(".thenBuy")，您可以选择所有类名为thenBuy 的元素，您需要使用.parent().find(".thenBuy")

• 为了让新的.IfNotAvailableSelectable在克隆后生效使用.IfNotAvailableSelectable

$(document).ready(function () {
  //clone
  var divContainer = $(".divContainer"),
      addMoreContent = $(".addMoreContent"),
      addMoreBtn = $(".addMoreBtn"),
      removeItem = $(".removeItem");
      
  addMoreBtn.click(function () {
    divContainer.clone(true).appendTo(addMoreContent);  
    addMoreContent.find(".IfNotAvailableSelectable").last().change();  //<<<<<<<<<< trigger the change event for the last/new IfNotAvailableSelectable
  });

  removeItem.click(function (e) {
    $(this).closest('div').remove();
    e.preventDefault();
  });
  
  //then buy functionO(when user selects "buy alternative")
  $(document).on('change', '.IfNotAvailableSelectable', function () {
    console.log($(this).val())
    var ThisSelect = $(this);  // define this
    var MainNav = ThisSelect.val();  // get this val
 
    if (MainNav == 0) {
      ThisSelect.parent().find(".thenBuy").show(); // use .parent().find
    } else {
      ThisSelect.parent().find(".thenBuy").hide(); // use .parent().find
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- card body-->
<div class="card-body bg-white divContainer" >
   <!-- delete button -->
<button type="button" class="close col-1 bg-white removeItem" >
          <span>×</span>
        </button>
  <!-- items -->
<select class=" custom-select text-capitalize">
  <option  >Waakye </option>
  <option >Banku</option>
  <option >Plain Rice</option>
</select>
<br>
<br>
<!-- price -->
  <div >
    <input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " > 
    <!-- "min" above should be the value of the  starting price of the selected item  and placeholder strating price should be the value of the starting price of the selected item too-->
    </div>
    <br>
<!-- if item is not available --> 
<div  style="font-size: medium;" >
<select  class="custom-select  text-capitalize IfNotAvailableSelectable">
  <option value="0" >If item is not available</option> 
  <option value="1" >Remove it from my order </option>
  <option value="2">Cancel entire order</option>
</select>
<br>
<!-- then buy -->
<div class="thenBuy"   >
<div>
 <span>Then Buy</span>
<select class=" custom-select text-capitalize">
  <option >Waakye </option>
  <option >Banku</option>
  <option >Plain Rice</option>
</select>
</div>
<br>
<!-- price -->
  <div >
    <span>Price</span>
    <input type="number" class="form-control" min="1" placeholder="starting price= GH¢1.00 " > 
    <!-- "min" above should be the value of the  starting price of the selected item  and placeholder strating price should be the value of the starting price of the selected item too-->
    </div>
  </div>
 </div>
<!-- end of card body -->
</div>
<br>
<div  class="addMoreContent" ></div>
<!-- onclick of add more,display the fiels here -->
<button  type="button" class="float-right btn btn-outline-dark btn-sm addMoreBtn">Add More</button> 
<br>