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

}

这里我已动态创建了上传按钮，并且已应用onclick事件我希望在点击上传按钮后，用户能够在服务器上传音频文件。如果我在正常按钮上应用onclick事件正在工作但是动态创建按钮则不起作用。任何人都可以帮我解决问题吗？

Answer 1

使用event delegation

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

对于动态添加的元素，使用静态父级将事件添加到动态添加的元素中。

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

请参阅文档：on

Answer 2

你的问题：

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

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

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

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

更新：您可以在行下移动您的点击装订：

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

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

按钮事件在firefox操作系统中不起作用

2 个答案: