Question

我想将一堆html下拉列表添加到一行动态生成的元素中。

<div class="row row-room cf">
<span class="roomNo">Room <span>1</span></span>
<div class="inputsection adult">
    <i class="small-icon-person"></i>
    <div class="inputbox">
        <div class="custom-select-v3">
            <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </select>
            <span></span>
        </div>
    </div>
</div>
<div class="inputsection child">
    <i class="small-icon-person-small"></i>
    <div class="inputbox">
        <div class="custom-select-v3">
            <select class="hotel-child-dropDown">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
            <span></span>
        </div>
    </div>
</div>  


<div class="specify-wrap">                                                            
   <!--Here i want to add some dropdowns -->
</div>


<i class="small-icon-x-red">remove room</i>
</div>

我将克隆整个结构6次或更短的时间，一旦我更改了 hotel-child-dropDown ，我想再向<div class="specify-wrap">添加一些下拉列表，这就是我所面临的问题是的，一旦我更改了下拉列表，所有<div class="specify-wrap">都会在所有克隆元素上生成相同的下拉列表。

我的代码：

$('.hotel-child-dropDown').each(function(){
    $(this).change(function(){
        var el = $(this).parents('.row').find('.specify-wrap');
        var val = $(this).val();
        el.empty();
        var html = 
                    '<div class="inputsection">'+
                    '  <div class="inputbox childMargin">'+
                    '   <div class="custom-select-v3">'+
                    '       <select>'+
                    '           <option>0</option>'+
                    '           <option>1</option>'+
                    '           <option>2</option>'+
                    '           <option>3</option>'+
                    '           <option>4</option>'+
                    '       </select>'+
                    '       <span></span>'+
                    '   </div>'+
                    ' </div>'+
                    '</div>';

        for(var i=0; i<val; i++)
        {
            el.append(html);
        }
        console.log(val);
    });
});

小提琴链接： enter link description here 有没有更好的解决办法来克服这种情况？

Answer 1

此处已更新 Fiddle

当您克隆div时使用clone(true)。像这样

$("#add").on("click",function(){
    var rowDiv = $(".row:first").clone(true);
    rowDiv.insertBefore("#add");
});

而不是使用.each()，直接在元素上附加change事件。像这样

$(".hotel-child-dropDown").on("change",function(){
    var el = $(this).parents('.row').find('.specify-wrap');
    var val = $(this).val();
    el.empty();
    var html = 
                '<div class="inputsection">'+
                '  <div class="inputbox childMargin">'+
                '   <div class="custom-select-v3">'+
                '       <select>'+
                '           <option>0</option>'+
                '           <option>1</option>'+
                '           <option>2</option>'+
                '           <option>3</option>'+
                '           <option>4</option>'+
                '       </select>'+
                '       <span></span>'+
                '   </div>'+
                ' </div>'+
                '</div>';

    for(var i=0; i<val; i++)
    {
        el.append(html);
    }
    console.log(val);
});

附加到dyanamicly生成的元素 - Jquery

1 个答案: