clone()只运行一次

Question

我在点击"添加产品"时尝试添加多个产品类别.我希望新产品选择框删除以前选择的产品类别.我第一次点击按钮时有这个工作,但它不会在第二次或第三次工作.谢谢参观.

的jsfiddle

HTML

<div id="products">
        <div id="product-row-1" class="row">
          <div class="small-6 columns">
            <select id="product-category-1" name="product-category-1" class="text">
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>
                <option value="d">d</option>
            </select>
          </div>

          <div class="small-6 columns">
            <input type="number" step="0.01" min="0.01" class="text" name="product_amount-1" id="product-amount-1" placeholder="$$$" />
          </div>
        </div>
      </div>

      <div class="center row">
        <button id="add-product">Add item</button>
      </div>

JS

$(document).ready(function(){
    var num = 1;
    $('#add-product').click(function(){

      var selVal = $('#product-category-'+num+'').val(); 
      var clone = $('#product-row-'+num+'').clone();

      $('#products').append(clone);

      num++;

      clone.attr("id", '#product-row-'+num+'');
      clone.find('select').attr("id", 'product-category-'+num+'').attr("name", 'product-category-'+num+'');
      clone.find('input').attr("id", 'product-amount-'+num+'').attr("name", 'product-amount-'+num+'');

      $('#product-category-'+num+'').find("option[value='"+selVal+"']").remove();

      return false;
    });
  });

Answer 1

更新克隆行的ID时,保留哈希值

clone.attr("id", '#product-row-' + num);

你必须删除哈希,否则你用哈希设置ID

clone.attr("id", 'product-row-' + num);

$(document).ready(function() {
    var num = 1;
    $('#add-product').click(function() {

        var selVal = $('#product-category-' + num + '').val();
        var clone = $('#product-row-' + num + '').clone();
        $('#products').append(clone);

        num++;

        clone.attr("id", 'product-row-' + num + '');
        clone.find('select').attr("id", 'product-category-' + num + '').attr("name", 'product-category-' + num + '');
        clone.find('input').attr("id", 'product-amount-' + num + '').attr("name", 'product-amount-' + num + '');

        $('#product-category-' + num + '').find("option[value='" + selVal + "']").remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="products">
    <div id="product-row-1" class="row">
        <div class="small-6 columns">
            <select id="product-category-1" name="product-category-1" class="text">
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>
                <option value="d">d</option>
            </select>
        </div>

        <div class="small-6 columns">
            <input type="number" step="0.01" min="0.01" class="text" name="product_amount-1" id="product-amount-1" placeholder="$$$" />
        </div>
    </div>
</div>

<div class="center row">
    <button id="add-product">Add item</button>
</div>