jquery - 通过 jQuery 选择动态 HTML 元素

Question

我正在构建一个 ASP.NET MVC 应用程序并且我正在使用 jQuery Blueimp动态添加到页面的 PartialView 上的插件。

根据插件的文档，我需要这样做:

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

但这当然对我来说行不通，因为我的 PartialView 一开始并不存在于页面上。

所以我的问题是，如何获取动态添加的文件输入，并在其上初始化 .fileupload。我已按照 Archer 的建议尝试了以下方法，但它不起作用:

$(function () {
    $('#campaign-form-wrap').on("change", "#fileUpload", function () {
        $('#fileUpload').fileupload({
            dataType: "json",
            url: "/ZenosIntranet/Campaign/ConvertExcelToVehicleDriverSummariesJson",
            limitConcurrentUploads: 1,
            sequentialUploads: true,
            maxChunkSize: 10000,
            done: function (e, data) {
                $.each(data.results, function() {
                    alert("boo");
                });
            }
        });
    });
});

我还确保按照 this question 上答案中的建议正确排序脚本.但是还是不行。我现在收到以下错误:

Uncaught TypeError: Object [object Object] has no method 'fileupload'

更新:我认为上面的语法不正确，因为即使我在 Chrome 的控制台中执行 this.siblings()，我也会收到错误:

TypeError: Object # has no method 'siblings'

这向我暗示代码认为我的 this 对象有一个名为 siblings 或 fileupload 的方法 - 但它们是吗？我知道在 fileupload 的情况下，我想将它附加到该控件。

Answer 1

您的事件处理程序实际上正在尝试立即运行该函数。您需要将它包装在一个匿名函数中，以便仅在事件发生时调用它...

$(function () {
    $('#campaign-form-wrap').on("submit", "#fileUpload", function() {
        $(this).fileupload({
            dataType: "json",
            url: "/ZenosIntranet/Campaign/ConvertExcelToVehicleDriverSummariesJson",
            limitConcurrentUploads: 1,
            sequentialUploads: true,
            maxChunkSize: 10000,
            done: function(e, data) {
                $.each(data.results, function() {
                    alert("boo");
                });
            }
        });
    });
});