通过jQuery选择动态HTML元素 [英] Select Dynamic HTML Element via jQuery

问题描述

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

I am building an ASP.NET MVC application and I am using the jQuery Blueimp plugin on a PartialView that is added dynamically to the page.

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

According to the Docs of the plugin I need to do this:

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

但这当然不会在我的情况下工作，因为我的PartialView不存在于页面上首先。

But this of course will not work in my case, because my PartialView does not exist on the page at first.

所以我的问题是，我如何抓住动态添加的文件输入，并初始化 .fileupload 它。我已经尝试了由Archer建议的以下内容，但它不起作用：

So my question is, how can I grab the dynamically added file input, and initialize .fileupload on it. I have tried the following as suggested by Archer, but it isn't working:

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

我还确保我有正确的脚本顺序，如这个问题。但还是没有去。我现在得到以下错误：

I also ensured I have the correct ordering of the scripts as suggested on answers on this question. But still no go. I am getting the following error now:

未捕获TypeError：Object [object Object]没有方法'fileupload'

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

更新：我认为上面的语法不正确，因为即使我做 this.siblings（）在Chrome的控制台中，我收到错误：

UPDATE: I think the syntax above is incorrect, because even when I do this.siblings() in Chrome's console, I get the error:

TypeError：Object＃没有方法'兄弟姐妹' p>

TypeError: Object # has no method 'siblings'

这对我来说，代码认为我的这个对象有一个叫做兄弟姐妹或文件上传的方法..但是呢？我知道在文件上传的情况下，我想要附加到该控件。

Which suggests to me that the code thinks my this object has a method called siblings or fileupload .. but do they? I know in the case of fileupload I am wanting to attach it to that control.

任何帮助将不胜感激。 / strong>

Any help would be greatly appreciated.

谢谢。

推荐答案

你的事件处理程序是实际上试图立即运行该功能。您需要将其包装在匿名函数中，以便仅在事件发生时才调用...

Your event handler is actually trying to run the function immediately. You need to wrap it in an anonymous function so it is only called when the event occurs...

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

这篇关于通过jQuery选择动态HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！