Select dynamic HTML Element via jQuery

Question

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 pl

Answer 1

So after a long discussion with Archer and many others, we figured the problem out.

The input form was coming through a PartialView.cshtml in my ASP.NET MVC application. Even though I had my plugin initialization code wrapped around a jQuery's .on() function, the plugin was still attempting to initialize things on initial page load.

I'm not sure why that is, my guess is that the plugin was designed that way!

So what I did was, I moved all script files related to the plugin from MVC's _Layout.cshtml and put them inside my _PartialView.cshtml.

This forced the plugin scripts to run as soon as the partial appeared on the page, and the plugin then worked fine.

NOTE: You still need to ensure that the ordering of the script files is correct.

• jQuery
• Widget UI
• iFrame Transport
• FileUpload

I hope this helps.

Answer 2

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