Question

我的HTML代码：

<div class="multi-field-wrapper">
<div class="multi-fields">
    <div class="multi-field">
        <div>
            <select id="sistem1">
                <option class="blank" value="">Select a car</option>
                <option value="saab">Saab</option>
            </select>
        </div>
        <div>
            <select id="sub_sistem1">
            </select>
        </div>
        <div>
            <select id="child_sub_sistem1">
            </select>
        </div>
        <button type="button" class="remove-field">Remove</button>
    </div>
</div>
<button type="button" class="add-field">Add field</button>

要添加（克隆）新字段，我使用此jquery：

$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
    var obj = $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').end().find('option').removeAttr('selected').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
    if ($('.multi-field', $wrapper).length > 1)
        $(this).parent('.multi-field').remove();
}); });

问题是，当我点击“添加字段”时，所有克隆/添加的元素仍使用相同的ID (sistem1, sub_sistem1,child_sub_sistem1)，如何使克隆/添加的元素具有唯一ID，例如{{1} ，(sistem2, sub_sistem2,child_sub_sistem2)？

为了选择链，我使用这个jquery：

(sistem3, sub_sistem3,child_sub_sistem3)

如果我使用上面的代码添加/克隆字段，当我选择一个选项时，所有克隆/添加的字段也会被更改，如何防止他？

Answer 1

我的第一个想法是，不要。使用增量ids可以完成的任何事情都可以通过类和给定索引完成，而且更简单（IMHO）。

例如，如果您想对第二组中的第二个选择框执行某些操作，则可以使用元素的类和jQuery的.eq（）（下面的代码中的示例）来执行此操作：

就创建克隆和附加处理程序的方式而言，这个过程可以大大简化，如：

$(function() {
  $multiFieldWrapper=$('.multi-field-wrapper');
  $multiFields = $('.multi-fields');
  $multiFields.data('cachedMultiField', $multiFields.html());
  $multiFieldWrapper.on('click', '.add-field', function() {
    $multiFields.append($multiFields.data('cachedMultiField'));
  });
  $multiFieldWrapper.on('click', '.remove-field', function() {
    $(this).closest('.multi-field').remove();
  });
  $multiFieldWrapper.on('change', '.sistem', function() {
    var cur=$multiFieldWrapper.find('.sistem').index($(this));
    $.post("core/select_sub_sistem.php", {
        id: this.value
    }, function(data) {
        $('.child_sub_sistem').eq(cur).empty();
       $('.sub_sistem').html(data);
    });
  });
  $multiFieldWrapper.on('change', '.sub_sistem', function() {
    var cur=$multiFieldWrapper.find('.sub_sistem').index($(this));
    $.post("core/select_child_sub_sistem.php", {
        id: this.value
    }, function(data) {
        $('.child_sub_sistem').eq(cur).html(data);
    });
  });

  // simulate adding an group
  $('.add-field').click();
  // add option to second select in second group
  $('.sub_sistem').eq(1).append('<option>Added option</option>');
});

<div class="multi-field-wrapper">
    <div class="multi-fields">
        <div class="multi-field">
            <div>
                <select class="sistem">
                    <option class="blank" value="">Select a car</option>
                    <option value="saab">Saab</option>
                </select>
            </div>
            <div>
                <select class="sub_sistem">
                </select>
            </div>
            <div>
                <select class="child_sub_sistem">
                </select>
            </div>
            <button type="button" class="remove-field">Remove</button>
        </div>
    </div>
    <button type="button" class="add-field">Add field</button>
</div>

如何有效地操作克隆元素并将函数绑定到克隆元素？

1 个答案: