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

Tushar
  • 85,780
  • 21
  • 159
  • 179
user3679542
  • 29
  • 4

2 Answers2

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

Tushar
  • 85,780
  • 21
  • 159
  • 179
  • Thanx :).i want to upload this audio file to server you hae vany idea how can i do it??ya any example code for fire fox os.I am completely new in this area.and i just know basic things only. – user3679542 Apr 21 '15 at 09:59
  • @user3679542 http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously – Tushar Apr 21 '15 at 10:01
0

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.

Beri
  • 11,470
  • 4
  • 35
  • 57