按钮事件在 firefox os 中不起作用答案

【问题标题】：button event is not working in fire fox os按钮事件在 firefox os 中不起作用
【发布时间】：2015-06-28 07:59:22
【问题描述】：

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');
    });

}

我在这里动态创建了上传按钮，并应用了onclick 事件我希望单击上传按钮后，用户能够在服务器上上传音频文件。如果我将在普通按钮上应用onclick 事件正在工作，但通过动态创建按钮它不起作用。谁能帮帮我？？

【问题讨论】：

标签： jquery firefox-os buttonclick

【解决方案1】：

使用event delegation

事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。

对于动态添加的元素，使用静态父元素为动态添加的元素添加事件。

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

见文档：on

【讨论】：

Thanx :)。我想把这个音频文件上传到服务器你不知道我该怎么做？你有任何火狐操作系统的示例代码。我在这方面是全新的。并且我只知道基本的东西。
@user3679542 stackoverflow.com/questions/166221/…

【解决方案2】：

你的问题：

您正在onsuccess 函数调用上创建元素上传。当您的#upload 按钮可能尚未添加到 DOM 时，可以在一段时间异步之后进行此调用，并且您的绑定 onclick 是在现场进行的。这就是为什么您需要将点击事件附加到 DOM 中已经存在的元素，例如 results：

这就是为什么您需要获取现有元素 (results) 并绑定：在任何#upload 都会附加到这个元素，给他这个 onclick 事件。

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

希望我已经解释了您的问题。

更新：您可以将点击绑定移到以下行：

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

这样，只有在附加上传按钮时才会添加点击事件。

【讨论】：