當動態創建文件輸入時，jQuery文件上載無效

Question

我正在使用這個jquery上傳器（ http://blueimp.github.io/jQuery-File-Upload/basic.html ），當文件輸入放在網站的原始代碼中時，它工作正常，但我動態追加使用jquery的字段，它不起作用。 這是觸發上傳的jquery：

$('.fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            alert(file.name);
            //$('<p/>').text(file.name).appendTo(document.body);
        });
    }
});

這就是應該觸發上傳的內容：

<input class="fileupload" type="file" name="files[]" data-url="uploads/">

這是jquery附加的代碼：

$(document).on('click','.addItem', function(){
            $('<!--ROW START-->\
                <form class="widget-content item" data-url="uploads/">\
                    <div class="row">\
                        <div class="col-md-3"><input type="text" class="form-control" name="itemName[]"></div>\
                        <div class="col-md-3"><textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
                        <div class="col-md-3"><textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
                        <input type="hidden" class="itemId" name="itemId[]" value="">\
                        <input type="hidden" name="itemInventoryId[]" value="<?=$_GET["inventory_id"]?>">\
                        <input type="hidden" name="itemParent[]" value="'+$(this).closest('.formHolder').data('parent-room')+'">\
                        <div class="col-md-2">\
                            <div class="fileinput-holder input-group">\
                                <input class="fileupload" type="file" name="files[]">\
                            </div>\
                        </div>\
                        <div class="col-md-1 align-center"><i class="save icon-ok large"> </i>&nbsp;&nbsp;&nbsp;<i class="delete icon-trash large"> </i></div>\
                    </div>\
                </form>\
            <!--/ROW END-->').fadeIn(500).appendTo($(this).parents().siblings('.items'));
            $(this).parent().parent().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn();
        });

就像我說的，當我把它添加到實際的代碼中，而不是動態它的罰款。 有人可以幫忙嗎？

Answer 1

這是因為在添加元素之前綁定了fileupload事件。

嘗試將代碼移動到回調函數中，該函數將在創建輸入元素后執行。 由於appendTo() 不支持回調 ，因此可以使用each(callback) ：

$('code_that_you_append').appendTo('some_element').each(function () {
    // here goes $('.fileupload').fileupload({ ... }) function
});

如果需要在代碼中的多個位置將事件綁定到.fileupload ，則可以創建一個函數來避免代碼重復，如下所示：

function bindFileUpload() {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
            });
        }
    });
};

然后在回調中調用它，就像之前一樣：

$('code_that_you_append').appendTo('some_element').each(function () {
    bindFileUpload();
});

我創建了一個小演示 。 它綁定click而不是fileupload來簡化事情（fileupload是外部插件...），但一般規則保持不變。

Answer 2

您需要使用jQuery live（）函數。

我找到的這個提示對我有用。

用於動態添加輸入字段的jQuery fileupload

Answer 3

首先使用靜態標識符綁定上傳功能。 這里，'document'是靜態標識符。 您可以使用尚未動態添加的此類內容。 通常，文檔更常用。

$(document).on('click', '.fileupload', function () {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
                //$('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

Answer 4

注意：請先看看已接受的答案。

我認為接受的答案沒有錯。 我只是想恢復它。 在@MichałRybak 小演示中，您將看到每次我們點擊add item另外的點擊事件也將被添加到之前添加的new link （添加更多然后new link並查看第一個new link顯示警報new item時間new item的時間）。 因為每次添加new link我們都會再次向所有new link元素添加click事件。

 $('<p><a href="#" class="link">new link</a></p>').appendTo('body').each(function () {
      // bindClickToLink call every 'new link' and add click event on it
        bindClickToLink();
    });  

要解決這些問題，請將click事件添加到我們剛剛添加到新創建的項目的所有項目中。 這是我的解決方案我的演示 。