Uploading files using jQuery from dynamically added input fields

Question

I'm using this jQuery api to handle file uploads with a status bar. I have the following (working) code:

$(".imageinput")
    .live("fileuploadadd", function(e, data) {
        data.dataType = "json";
    })
    .live("fileuploadsend", function(e, data) {
        data.dataType = "json";
        debugger;
        $(
            '<div id="paragraph"' + createNewParagraphID() + '" class="new paragraph image">' +
                '<div class="progressbar"></div>' +
            '</div>' +
            controlDiv + createNewParagraph()
        ).insertAfter($(this).parent());
    })
    .live("fileuploadprogressall", function(e, data) {
        data.dataType = "json";
        var bar = $(this).parent().next().children().css("width", parseInt(100 * data.loaded / data.total, 10) + "%");
    })
    .live("fileuploaddone", function(e, data) {
        data.dataType = "json";
        $.each(data.result, function(index, file) {
            console.log("done");
        });
    });

I need to use the code below in order to get a response about the upload status from the server. Since there is a possibility to add elements dynamicly, I need to use the live method.

$(".imageinput").fileupload({
    dataType: "json"
});

How can I set the datatype in this api using dynamicly added elements?

Answer 1

I found the answer myself:

$(".imageinput").live("hover", function(e) {
    $(".imageinput").fileupload({
        dataType: "json",
        start: function(e) {
            $(
                '<div id="paragraph"' + createNewParagraphID() + '" class="new paragraph image">' +
                    '<div class="progressbar"></div>' +
                '</div>' +
                controlDiv + createNewParagraph()
            ).insertAfter($(this).parent());
        },
        progressall: function(e, data) {
            var bar = $(this).parent().next().children().css("width", parseInt(100 * data.loaded / data.total, 10) + "%");
        },
        done: function(e, data) {
            $.each(data.result, function(index, file) {
                console.log("done");
            })
        }
    })
});