增量 class/ID 以将功能传递给克隆的元素

Question

我有一段代码包含下拉菜单和 3 个只读输入字段。输入字段是使用 javascript 填充的，使用下面的代码 -

它自己可以正常工作

$(document).on('change', '.unit', function(e) {

//Getting Value
var role = $('.unit option:selected').data('role');
    var power = $('.unit option:selected').data('power');
    var type = $('.unit option:selected').data('type');


//Setting Value
$(".role").val(role);
    $(".power").val(power);
    $(".type").val(type);
});

我想使用此代码克隆元素 -

 //define template
var template = $('.duplicate-sections .form-section:first').clone();

//define counter
var sectionsCount = 1;

//add new section
$('body').on('click', '.addsection', function() {

    //increment
    sectionsCount++;

    //loop through each input
    var section = template.clone(true, true).find(':input').each(function(){

        //set id to store the updated section number
        var newId = this.id + sectionsCount;

        //update for label
        $(this).prev().attr('for', newId);

        //update id
        this.id = newId;

    }).end()

    //inject new section
    .appendTo('.duplicate-sections');
    return false;
});

//remove section
$('.duplicate-sections').on('click', '.remove', function() {
    //fade out section
    $(this).closest('.form-section').fadeOut(300,             function(){
    $(this).closest('.form-section').empty();
    });
    return false;
});

克隆过程有效，下拉菜单和输入被克隆。但是，在填充克隆的输入字段时，它使用来自父项而不是克隆的值。

我的html是-

<div class="duplicate-sections">
            <div class="form-section">
        <div class="form-group row">
<label for="inputFirstName" class="col-form-label col-sm-3 text-left text-sm-right">Unit Type</label>
<div class="col-sm-3">
   <select name="unit" id="unit" class="form-control unit"><option value="">Select</option><option 
data-role="HQ" data-power="4" data-type="Company Commander" value="1">Ehrwig Arellano</option>
<option data-role="HQ" data-power="6" data-type="Company Commander" value="2">Ehrwig 
Arellano</option>
<option data-role="HQ" data-power="2" data-type="Tempestor Prime" value="3">Tempestor Prime</option>
</select></div>
    <div class="col-sm-2 increment_controls">
    <input type="text" id="role" name="role" class="form-control role" readonly placeholder="Role">
</div>
            <div class="col-sm-1 increment_controls">
    <input type="text" id="power" name="power" class="form-control power" readonly placeholder="PL">
</div> 
            <div class="col-sm-3 increment_controls">
    <input type="text" id="type" name="type" class="form-control type" readonly placeholder="Type">
</div>
            
</div>
        
                <label for="inputFirstName" class="col-form-label col-sm-3 text-left text-sm-right"> 
</label><input class="remove col-sm-9" type="button" value="Remove Unit"></input>
      </div>
        </div>
        <label for="inputFirstName" class="col-form-label col-sm-3 text-left text-sm-right"></label> 
<input class="addsection col-sm-9" type="button" value="Add Unit"></input>

所有内容都可以在这里找到 - JSFiddle

Answer 1

您需要更新单元的更改事件处理程序脚本，因为在这里您只需要更新相关表单部分的输入字段，而不是所有输入字段。

见下方代码

$(document).on('change', '.unit', function(e) {
   
    //Getting Value
    var $option = $(this).find('option:selected');
    var role = $option.data('role');
        var power = $option.data('power');
        var type = $option.data('type');
    
    
    //Setting Value
    var $parent = $(this).closest('.form-section');
    $parent.find(".role").val(role);
        $parent.find(".power").val(power);
        $parent.find(".type").val(type);
    });

Demo JSFiddle

增量 class/ID 以将功能传递给克隆的元素

Increment class/ID to carry function to cloned element

javascript

jquery

clone

populate