button event is not working in fire fox os

Question

function listContents(storagename) {

    alert("inside function");
    //Clear up the list first
    $('#results').html("");
    var files = navigator.getDeviceStorage(storagename);

    var cursor = files.enumerate();

    cursor.onsuccess = function () {
        //alert("Got something");
        var file = this.result;
        if (file != null) {
            var tagvalue = $("<p>" + file.name + "," + file.lastModifiedDate + "," + file.type + "," + file.size + "</p>").appendTo('#results');

            console.log('tagvalue is ' + tagvalue);
            tagvalue.appendTo("#results");
            console.log('tagvalue is upended ' + tagvalue);
            var r = $('<input type="button" value="upload"  id="upload" /  >');
            console.log('button created!' + r);
            r.appendTo("#results");
            console.log('button uploded!' + r);
            this.done = false;
        } else {
            this.done = true;
        }

        if (!this.done) {
            this.continue();
        }
    }

    $('#upload').on('click', function () {
        console.log('onclick function!');
        //alert('blah');
    });

}

here I have created upload button dynamically and I have applied onclick event I want that after clicking on upload button user is able to upload audio file on server .if I will apply onclick event on normal button is is working but with dynamic creation of button it is not working. Can any one help me plzz??

Answer 1

Use event delegation

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

For dynamically added elements use static parent to add event to the dynamically added elements.

$('#results').on('click', '#upload', function () {
    // Handler here
});

See Doc: on

Answer 2

Your problem:

You are creating an element upload on onsuccess function call. This call can be made after some time-async and your binding onclick is made on spot, when your #upload button may not be yet added to DOM. That is why you need to attach click event to an alement that is already present in DOM, like results:

That is why you need to get existing element (results) and bind: in any #upload will be attached to this one, give him this onclick event.

$('#results').on('click', '#upload', function () {
    // Handler here
});

I hope I had explained your problem.

UPDATE: You could move your click binding under line:

console.log('button uploded!' + r);

This way your click event will be added only when your upload button is attached.