时间戳

首页 > 解决方案 > 如何将 EventListener 添加到特定节点？回答

javascript - 如何将 EventListener 添加到特定节点？回答

问题描述

我正在尝试在网站上制作文件浏览器。首先，我制作了一个 XMLHttpRequest 来获取当前目录中的所有文件并将其添加到 HTML 中。问题是当我想在 HTML 中获得的所有节点上放置一个事件监听器时，他不能，因为 XML 请求总是在我想放置事件监听器的那一刻之后完成......

$(window).on("load", function() {
    //prépare ajax
    let ajax = new XMLHttpRequest();
    let methode = "GET";
    let url = "php/getFile.php"
    let asynchronous = true;
    ajax.open(methode, url, asynchronous);

    ajax.send();
    let data;
    ajax.onreadystatechange = function() {

        if (this.readyState == 4 && this.status == 200) {
            let data = JSON.parse(this.responseText);
            let files = ` <ul data-role="listview" data-view="list" data-select-node="true">
            <ListView ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollMode="Enabled" >`;
            for (let i = 0; i < data.length; i++) {
                let file = data[i];
                let nom = file['file'];
                let ext = "." + file['ext'];
                let nudeExt = file['ext'];

            files += `<li id="test" data-icon="<span class='mif-document-file-${nudeExt.toLowerCase()}'>" data-caption="${nom}"></li>`
                

            }
            files += `   </ul>`;
            document.querySelector("#files").innerHTML = files;
            
// I try to put the event listener here but it doesn't work,  

            document.querySelector("#test").addEventListener("onclick", test());
        }

    }


})

function test() {
    let test = document.querySelector('#test');
    console.log(test)
}

回答

在添加这样的事件侦听器的地方：

document.querySelector("#test").addEventListener("onclick", test());

我直接在节点中添加了这样的事件：

files += ` <li ondblclick="test()" class="folder" type="folder" data-icon="<span class='mif-folder'>" data-caption="${nom}"></li>

标签： javascripthtmljquerycssxmlhttprequest

解决方案

回答

在添加这样的事件侦听器的地方：

document.querySelector("#test").addEventListener("onclick", test());

我直接在节点中添加了这样的事件：

 files += `    <li  ondblclick="test()" class="folder" type="folder" data-icon="<span class='mif-folder'>" data-caption="${nom}"></li>```

推荐阅读