Javascript works in Webkit but not FF

I'm using jQuery and Andrew Valum's file uploader to handle ajax image uploads in my form. The desired behavior is to have it upload the file immediately to the server when the file input is selected by the user.

html element:

<input type="file" id="imgUpload" />

js:

var uploader = new qq.FileUploaderBasic({
  button: $('#imgUpload')[0],
  //...
});

The above works fine with Chrome and Safari but doesn't with Firefox. Are there any differences in the ways that Firefox handles JS? Thanks much.

EDIT: Although I'm not a javascript expert, I think Valum's file uploader replaces the targeted input element with one of its own, that it then attaches an onchange listener to in order to handle the custom ajax request. This works well in Chrome. In Firefox, though, the event never triggers the ajax request. The file input acts just like it would in a normal html form, and requires a form submit. There's no javascript errors or anything, and all the other scripts work fine in all browsers.

UPDATE: Still working at it. Turns out that qq.FileUploaderBasic is initializing correctly and the "change" event is being suc开发者_运维知识库cessfully sent by the input element. It just doesn't trigger the event handler in FF as it does in Chrome.

---

Turns out that this is a css problem rather than a Javascript one. What happens is that the file upload script creates a new <input type="file"> element inside the targeted input element. This new targeted input element has the desired change event handler.

In Chrome, clicking on the original input activates the new input element, which triggers the desired behavior. The problem is, in Firefox, clicking on the original input somehow activates the original input element instead of the new one. This is the cause of the problem.

So this is more of a cross-browser css issue than a Javascript one. My next step is to figure out how to get Firefox to select the right element, but for now hopefully this will help others who have the same problem.