How do I create a button with a function, then submit it, with jQuery?

Question

I am using the following code to add a button to a page

$("#myDiv").html("<button id='fileUpload'>Upload</button>");

I am then creating an Ajax Upload instance on the button.

var button = $('#fileUpload'), interval;
new AjaxUpload(button, {
    action: '/upload.ashx',
    name: 'myfile',
    onSubmit: function(file, ext) {
        button.text('Uploading');
        this.disable();

        // Uploding -> Uploading. -> Uploading...
        interval = window.setInterval(function() {
            var text = button.text();
            if (text.length < 13) {
                button.text(text + '.');
            } else {
                button.text('Uploading');
            }
        }, 200);
    },
    onComplete: function(file, response) {
        button.text('Upload');
        window.clearInterval(interval);                
    }
});   

What I want to do is append the button to the page then simulate clicking it automatically. How would I go about doing this?

Update

The code now reads:

$("#myDiv").html("<button id='fileUpload'>Upload</button>");
var button = $('#fileUpload'), interval;
new AjaxUpload(button, {
    action: '/upload.ashx',
    name: 'myfile',
    onSubmit: function(file, ext) {
        button.text('Uploading');
        this.disable();

        // Uploding -> Uploading. -> Uploading...
        interval = window.setInterval(function() {
            var text = button.text();
            if (text.length < 13) {
                button.text(text + '.');
            } else {
                button.text('Uploading');
            }
        }, 200);
    },
    onComplete: function(file, response) {
        button.text('Upload');
        window.clearInterval(interval);                
    }
});
$('#fileUpload').click();

The .click event does not seem to fire. It is reached in the code but does nothing...

** Update **

$('#fileUpload').click();

needs to be

 $('input').click(); 

Please check the accepted answer for why.

Answer 1

What I want to do is append the button to the page then simulate clicking it automatically. How would I go about doing this?

The short answer is that you don't.

The long answer:

First you need to understand how AJAX Upload works.

Plugin creates invisible file input on top of the button you provide, so when user clicks on your button the normal file selection window is shown. And after user selects a file, plugin submits form that contains file input to an iframe. So it isn't true ajax upload, but brings same user experience.

There are two things here:

1. fileUpload is not the actual file input

2. Generally, <input type="file"> element cannot be clicked/set programmatically in modern browsers for security reasons.

Answer 2

您实际上在按钮上没有click处理程序，因此什么也没有发生。

Answer 3

只需走

$('#fileUpload').click();

Answer 4

You can call the click handler on the button like this:

$('#fileUpload').click();

You have already handled adding it to the page.

Answer 5

$('body').append('<a href="somepage.ashx" id="send">Go</a>').find('#send').click();