Question

添加新表单以提交滑块时，我使用.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);
    });
});

Answer 1

如果您使用clone来克隆绑定了它们（或其子元素）的事件侦听器的元素，那么您必须传入参数，其中第二个参数必须为true - 例如$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);
    });
});

克隆文件输入表单不起作用

1 个答案: