jquery 如何删除附加到动态生成的HTML元素的特定单击事件处理程序?

eqoofvh9  于 2023-03-01  发布在  jQuery
关注(0)|答案(3)|浏览(116)

下面的代码创建一个新的button元素,文本为"Download",ID为"download",并将其作为ID为"container"的元素的子元素追加。
当按钮被点击时,容器的onclick也会被触发,我试着用removeEventListener()删除它,但没有成功。

document.getElementById('download').removeEventListener("onclick", myclick); 
document.getElementById('download').removeEventListener("click", myclick);
document.getElementById('download').removeEventListener("click", myclick, true);

function cleanup(elem) {
    for (let t in elem) if (t.startsWith('on') && elem[t] != null) {
        elem[t] = null;
        console.log('cleanup removed listener from '+elem.nodeName,t);
    } 
    for (let t of elem.all_handlers || []) {
        elem.removeEventListener(t.typ, t.fn, t.opt);
        console.log('cleanup removed listener from '+elem.nodeName,t.typ);
    } 
}

var el = document.getElementById('download');
cleanup(el);

我也试过所有的answers,没有一个删除了onclick.(eidogg. cloning etc.)ps:HTML代码无法修改,因为它是框架的一部分。
x一个一个一个一个x一个一个二个x

pengsaosao

pengsaosao1#

如果你想防止按钮被按下时调用myclick函数,其实你可以在按钮上添加onclick事件:

$(document).ready(function() {
    $('#container').append(
        $(document.createElement('button')).prop({
            type: 'button',
            innerHTML: 'Download',
            id : 'download'
        })
    );
    $("#download").on("click", function(e) {
        e.stopPropagation(); // prevents myclick being triggered
        console.log('myclick btn'); // other possible code you want..
    })
});

function myclick(e) {

   console.log('myclick');

}
i5desfxk

i5desfxk2#

您正在从#download中删除eventlistener,是否应该从#container中删除它?

$("#container").prop("onclick", null).off("click");

document.getElementById('container').onclick = null;
eoxn13cs

eoxn13cs3#

删除父元素的事件监听器并不是最好的方法,相反,子元素的事件监听器应该调用event.stopPropagation()来防止事件冒泡到父元素。我建议在线阅读JavaScript中的事件冒泡。

相关问题