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

Simply by going

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

Answer 2

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

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

You have already handled adding it to the page.

Answer 3

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

Answer 4

You don't actually have a click handler on the button, hence nothing happens.

Answer 5

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.