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: ```

``` 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?

Accepted Answer

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

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

Solution

Problem