在文件输入表单上克隆不起作用答案

【问题标题】：clone on file input form not working在文件输入表单上克隆不起作用
【发布时间】：2015-11-28 23:51:04
【问题描述】：

添加新表单以提交滑块时，我使用 .clone 和 .append/insertBefore (Jquery) 来制作新表单。但是，我的文件输入功能仅适用于原始表单。我试图让代码采用 .change 上的文件名并插入到文本字段中。你能帮我弄清楚为什么这对克隆不起作用吗？

这是我的代码：

HTML

    <div class = "add_contCall">
    <p>Nuevo Slider</p>
    <button class = "btn btn-primary addFrom_slide">+</button>
</div>

    {!!Form::open(array('url' => 'admin/new_slider', 'files' => true, 'class' => 'newForm')) !!}
            {!! Form::hidden('position', null, ['class' => 'form-control slide_position']) !!}
        <div class = "form-group">
            {!!Form::label('title', 'Title:', ['class' => 'control-label']) !!}
            {!!Form::text('title', null, ['class'=> 'input-mini'])!!}

            {!!Form::label('title', 'Description:', ['class' => 'control-label']) !!}
            {!!Form::text('description', null, ['class'=> 'input-mini '])!!}
        </div>

        <div class = "form-group">
            {!!Form::label('title', 'Link:', ['class' => 'control-label']) !!}
            {!!Form::text('link', null, ['class'=> 'input-mini'])!!}

            <div class = "image_group">
            {!!Form::label('title', 'Image:', ['class' => 'control-label']) !!}
            {!!Form::text('empty', null, ['class'=> 'input-mini file_name'])!!}
            <div class = "btn btn-primary image_uploader">
                <span>Anadir Imagen</span>
                {!! Form::file('image', ['class' => 'image_']) !!}
            </div>
            </div>

        </div>
        {!! Form::close() !!}

        <div class = "form-group fg_save">
            <button class = "btn btn-default sub_add">Guardar</button>
            <hr>
        </div>
</div>

Javascript：

    $('.image_uploader').on('click',function() {
    var $input = $(this).children("input:file");
    var $filename = $(this).siblings('.file_name');
    $input.change(function (){
        var fileName = $(this).val();
        var reFry = fileName.substr(12);
        $filename.val(reFry);
    });
});

【问题讨论】：

标签： jquery html forms clone

【解决方案1】：

如果您使用clone 来克隆绑定了事件侦听器的元素（或其子元素），那么您必须传入参数，其中第二个必须为真 - 例如$element.clone(true,true) - 因此事件侦听器/数据也会被克隆，如 API 中所述：

https://api.jquery.com/clone/#clone-withDataAndEvents-deepWithDataAndEvents

另一种解决方案是将表单事件委托给不变的父元素，这样您就不必担心这一点，例如：

$('some-non-changing-parent-element').on('click','.image-uploader',function() {
    var $input = $(this).children("input:file");
    var $filename = $(this).siblings('.file_name');
    $input.change(function (){
        var fileName = $(this).val();
        var reFry = fileName.substr(12);
        $filename.val(reFry);
    });
});

【讨论】：