找到你要的答案

Q:Buttons from cloned section not working properly

Q:来自克隆部分的按钮无法正常工作

I'm new to jquery scripts. I managed to clone one section of the form dynamically but my button to display the ckeditor's div in the cloned section is not working. It still listening to the button from the original section and will only show the ckeditor's div(but unable to edit all of them except the original) when the original button was clicked. Here is my code:-

for(i=num; i<value; i++){
    var newSlot = $('#slot' + i).clone().attr('id','slot' + (i+1));

    newSlot.find('.heading-slot').attr('id', 'ID' + (i+1) + '_slot').html('Slot ' + (i+1)); //add new slot name

    newSlot.find('.other_message').hide();
    newSlot.find('.select_instruction').on('change', function () {  
        $(this).next('.other_message').toggle((this.value) == "Other")
    });


    newSlot.find('.extra_instruction').hide();
    //the button here is not working as I wanted
    newSlot.find('.btnAdditional').on('click', function(){
        $(this).next('.extra_instruction').show();
    });

    $('#slot' + i).after(newSlot);
}

html code

    <div class="col-sm-6">
        <button type="button" id="btn_Additional" name="btn_Additional" class="btnAdditional btn btn-info">Additional Instruction</button>
            <div class="extra_instruction">
                <textarea id="input_add_instruction" name="add_instruction[]" class="form-control"></textarea>
<script>CKEDITOR.replace( 'input_add_instruction' );</script>
            </div>
    </div>

Can anyone guide me on this?? Please I'm very new to this. Thanks in advances..

我是新来的jQuery脚本。我设法克隆一段形式动态但我的按钮在克隆的部分显示CKEditor的div不工作。仍听按钮从原来的部分,只会显示CKEditor的div(但不能编辑所有人除了原)原来当按钮被点击了。这是我的代码:—

for(i=num; i<value; i++){
    var newSlot = $('#slot' + i).clone().attr('id','slot' + (i+1));

    newSlot.find('.heading-slot').attr('id', 'ID' + (i+1) + '_slot').html('Slot ' + (i+1)); //add new slot name

    newSlot.find('.other_message').hide();
    newSlot.find('.select_instruction').on('change', function () {  
        $(this).next('.other_message').toggle((this.value) == "Other")
    });


    newSlot.find('.extra_instruction').hide();
    //the button here is not working as I wanted
    newSlot.find('.btnAdditional').on('click', function(){
        $(this).next('.extra_instruction').show();
    });

    $('#slot' + i).after(newSlot);
}

HTML代码

    <div class="col-sm-6">
        <button type="button" id="btn_Additional" name="btn_Additional" class="btnAdditional btn btn-info">Additional Instruction</button>
            <div class="extra_instruction">
                <textarea id="input_add_instruction" name="add_instruction[]" class="form-control"></textarea>
<script>CKEDITOR.replace( 'input_add_instruction' );</script>
            </div>
    </div>

有人能指导我吗?请我对这个很新。感谢进步..

answer1: 回答1:

The clone function not only clones the html but also the event listeners, instead of cloning try creating your element and adding the event listeners properly.

克隆功能不仅克隆HTML也是事件监听器,而不是克隆尝试创建元素和添加事件侦听器的正确。

javascript  jquery