时间戳

首页 > 解决方案 > 如何下载用户创建的元素并给它一个事件？

javascript - 如何下载用户创建的元素并给它一个事件？

问题描述

如何下载用户创建的元素并给它一个事件？

function tasks(e) {
    inputV = input.value;
    e.preventDefault();
    if (inputV !== "") {
        const ul = document.querySelector('.tasks-list');
        let li = document.createElement('li');
        li.innerHTML += inputV /*`<button class="deleteTasks">Usuń</button>`*/;
        ul.appendChild(li);
        let btnDell = document.createElement('button');
        btnDell.setAttribute("id", "deleteTasks");
        btnDell.innerHTML += 'usuń';
        li.appendChild(btnDell);
        input.value = "";
    }
};
add.addEventListener('click', tasks);

标签： javascript

解决方案

创建新列表元素后，您可以附加自定义事件处理程序。

function tasks(e) {
    inputV = input.value;
    e.preventDefault();
    if (inputV !== "") {
        const ul = document.querySelector('.tasks-list');
        let li = document.createElement('li');
        li.innerHTML += inputV /*`<button class="deleteTasks">Usuń</button>`*/;
        let node = ul.appendChild(li).cloneNode(true);
        node.addEventListener('click',(e)=>{
            e.preventDefault();
            let target = e.target;
            // put your logic here to execut on target after it being clicked
        },false); 
        let btnDell = document.createElement('button');
        btnDell.setAttribute("id", "deleteTasks");
        btnDell.innerHTML += 'usuń';
        li.appendChild(btnDell);
        input.value = "";
    }
};
add.addEventListener('click', tasks);

编辑 我在阅读您的评论后正在编辑此内容，请编辑您的问题而不是发表评论以澄清您的问题。我的假设是你想要这个功能。

但是似乎您的删除逻辑不会在新创建的项目上执行，如果是这种情况，请尝试在每个可删除项上设置一个类属性li并在此基础上编写 btnDell querySelectorAll，以便在执行时获取所有元素。

推荐阅读