Question

当文件输入更改并收到值时，我想将该值设置为tr.file_name。之后，我想克隆该TR并将其粘贴到

克隆有效，但对于多个文件，它无法正常工作。有人可以帮助我吗？

<tr class="file_row">
    <td class="file_title"></td>
    <td class="text-center">
        <a class='btn btn-info btn-xs' href="#">
            <span class="glyphicon glyphicon-edit"></span> Edit
        </a> 
       <a href="#" class="btn btn-danger btn-xs">
           <span class="glyphicon glyphicon-remove"></span> Del
       </a>
    </td>
    <td>
        <div class="fileUpload btn btn-primary btn-xs">
            <span><b>+</b> Upload</span>
            <input type="file" class="upload" />
        </div>
    </td>
</tr>

使用Javascript：

$(document).ready(function(){
    var filename
    $('.file_row').change(function(){
        file();
    });

    file();

    function file(){
        var empty = true;
        var filename;

        $('.file_row').each(function(){
            filename = $(this).find('.upload').val();
            $(this).find('.file_title').text(filename);

            if(filename != ''){
                empty = false;
            }
        });

        if(empty == false){
            var row = $('.file_row:first-child').clone();
            $(row).find('.upload').val('');
            $(row).appendTo('table');
        }
    }
});

I've also made a fiddle.

Answer 1

从此处更改事件绑定：

$('.file_row').change(function(){
    file();
});

对此：

$('table').on('change','.file_row', function(){
    file();
});

由于方法更改仅在您调用时绑定到页面上已有的事件。将事件委托给公共父项时，会动态添加元素。

Answer 2

您忘记清除克隆tr

中的file_title

$(row).find('.file_title').text('');

更新了jsfiddle：http://jsfiddle.net/a23ez9eg/4/

onClick，clone和empty file属性

2 个答案: