动态行文件名到文本框中答案

【问题标题】：Dynamic row file name into textbox动态行文件名到文本框中
【发布时间】：2015-01-03 00:51:34
【问题描述】：

使用 jquery 和 bootstrap-jasny 我创建了一个动态行插入：

html:

<table id="internalTbl">
    <tr><td><div class="fileinput fileinput-new" data-provides="fileinput"> <span class="btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span>
    <input type="file" name="name">
    </span> <span class="fileinput-filename"></span>
 <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
    <input type="text" name="namehidden" />
        </td></tr>
</table>
        <button id="addInternal"> add </button>

javascript：

    // add new row to internal listing table
    $("#addInternal").click(function() {
        $("#internalTbl").each(function () {
            var tds = '<tr>';
            $.each($('tr:last td', this), function () {
                tds += '<td>' + $(this).html() + '</td>';
            });
            tds += '</tr>';

            if ($('tbody', this).length > 0) {
                $('tbody', this).append(tds);
            } else {
                $(this).append(tds);
            }
        });

        // clear the last file input field
        $("#internalTbl tr:last .fileinput").fileinput('clear');
    });

对于子序列，我无法将文件名分配给文本框。

【问题讨论】：

什么是fileinput()。抛出什么错误？ ID 必须是唯一的，所以不知道为什么你有 $("#internalTbl").each，因为只能有一个元素匹配该选择器

标签： javascript jquery twitter-bootstrap jasny-bootstrap

【解决方案1】：

您需要为动态添加的文件输入委托更改事件。 More on delegate。下面的代码将在未来的元素上附加更改事件.fileinput

$(document).on('change.bs.fileinput', '.fileinput', function (e) {
    var filename = $(this).closest('tr').find('.fileinput-filename').text();
    $(this).closest('tr').find('input[type="text"]').val(filename);
});

我还使用了两种附加方法，一种是单击手动创建 trs 和 tds，另一种是 clones 第一个 tr 并附加到表中。你可以使用任何一个。

var fileinput = $('#internalTbl tr td:eq(0)').html();
var td = '<td>'+fileinput+'</td>';
var tr ='<tr>'+ td+'</tr>';


$("#addInternal").click(function () {
    $("#internalTbl tbody").append(tr);
    $("#internalTbl tr:last .fileinput").fileinput('clear');
});

$("#addInternal2").click(function () {  
    var cloned_elem = $('#internalTbl tr:first').clone();
    $("#internalTbl tbody").append(cloned_elem);
    $("#internalTbl tr:last .fileinput").fileinput('clear');
});

Demo Fiddle

【讨论】：