6

私はこの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();
        });

私が言うように、動的にではなく、実際のコードに追加すると問題ありません。誰か助けてくれませんか？

4

4 に答える 4

18

これは、fileupload要素が追加される前にイベントをバインドするためです。

入力要素を作成した後に実行されるコールバック関数にコードを移動してみてください。appendTo() callback をサポートしていないため、次を使用できます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 は外部プラグインです...)、一般的なルールは同じままです。

于 2013-10-19T16:20:19.210 に答える
4

jQuery live() 関数を使用する必要があります。

私が見つけたこのヒントは私のために働いた。

動的に追加された入力フィールドの jQuery ファイルアップロード

于 2013-11-10T06:41:35.470 に答える
2

最初にアップロード関数を静的識別子にバインドするだけです。ここで、「ドキュメント」は静的識別子です。動的に追加されていないこのようなものは何でも使用できます。通常、ドキュメントはより頻繁に使用されます。

$(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);
            });
        }
    });
});
于 2016-08-07T20:57:18.990 に答える
0

注意：最初に受け入れられた回答をご覧ください。

受け入れられた答えにはほとんど間違いがないと思います。私はそれを回復しようとしているだけです。@Michał Rybak の小さなデモadd itemでは、別のクリック イベントをクリックするたびに、以前に追加されたイベントに追加されることがわかりますnew link(さらに追加 して、new link最初new linkにアラートを表示する回数を確認してくださいnew item)。追加するたびにnew link、クリックイベントをすべてのnew link要素に再度追加するためです。

 $('<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();
    });

その問題を解決するには、代わりに、新しく作成したアイテムに追加するすべてのアイテムにクリック イベントを追加します。これが私のデモです。

于 2015-12-25T03:59:54.843 に答える