Question

使用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');
    });

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

Answer 1

您需要为动态添加的fileinput委派change事件。 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

动态行文件名到文本框中

1 个答案: