Why does the jQuery file upload stop working after first upload?

Question

I'm using the jQuery File Upload plugin. I'm hiding the file input and activating it upon clicking a separate button. (See this fiddle.)

HTML:

<div>
    <button class="browse">Browse</button>
    <input id="upload" type="file" style="display: none;" />
</div>

JavaScript:

var element = $("#upload");

$(".browse").click(function () {
    $("#upload").trigger("click");
});

element.fileupload({
    add: function () {
        alert("add");
    }
});

Notice that if you press the button then select a file, the add method is activated and you'll get an alert. Do it again, and you'll get another alert.

Now, see this fiddle. The only difference is that I've changed the following line

$("#upload").trigger("click");

to

element.trigger("click");

Notice that now, the first time you click the button then select a file, the add method is activated and you get the alert (just like before), but if you do it again, the add method never activates.

What is causing this difference in behavior?

Answer 1

It looks as though the scope of element is being lost / changed after the add function. Resetting it like below seems to work.

var element = $("#upload");

$(".browse").click(function () {
    element.trigger("click");
});

element.fileupload({
    add: function () {
        alert("add");
        element = $(this);
    }
});

Fiddle