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() 不支持回调，您可以使用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简化事情（文件上传是外部插件......），但一般规则保持不变。

于 2013-10-19T16:20:19.210 回答
4

您需要使用 jQuery live() 函数。

我发现这个技巧对我有用。

用于动态添加输入字段的 jQuery 文件上传

于 2013-11-10T06:41:35.470 回答
2

只需首先将上传功能与静态标识符绑定即可。这里，'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);
            });
        }
    });
});
于 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 回答