Question

如何在DOM中呈现的动态创建元素上调用click事件侦听器？

我有一些脚本动态创建DOM中的元素，其中一个是按钮/ a。一旦用户点击它，我希望该按钮/ a做一些事情。现在没有任何事情发生，但如果我在点击时发生的事情上添加了Credit，那么它有点工作 - 只让我在第一个元素的点击（按钮）上做点什么/一个）。但是，我不能依赖setTimeout来使这段代码工作。

如果没有setTimeout方法，我或多或少会有所不同：

setTimeout

此处使用// This triggers the whole process var mainBtn = document.querySelector('.mainBtn'); mainBtn.addEventListener('click', function(e){ e.preventDefault(); mainFunc(); }); // This creates and renders dynamic content in DOM function mainFunc(){ var out = document.querySelector('.outputWrapper'); var mainArr = ['something ', 'another ', 'else ', 'last one.']; var div = document.createElement("div"); var btn = document.createElement("a"); var btnText = document.createTextNode("Click Me"); btn.appendChild(btnText); btn.className = "clickMeBtn"; for(a of probArr){ div.append(a); div.append(btn); } out.append(div); } // This is what should happen on button/a click var clickedBtn = document.querySelector('.clickMeBtn'); if( clickedBtn != null ){ clickedBtn.addEventListener('click', function(e){ e.preventDefault(); console.log('click'); }); }方法：

setTimeout

这种作品再一次......它让我只点击// This triggers the whole process var mainBtn = document.querySelector('.mainBtn'); mainBtn.addEventListener('click', function(e){ e.preventDefault(); mainFunc(); }); // This creates and renders dynamic content in DOM function mainFunc(){ var out = document.querySelector('.outputWrapper'); var mainArr = ['something ', 'another ', 'else ', 'last one.']; var div = document.createElement("div"); var btn = document.createElement("a"); var btnText = document.createTextNode("Click Me"); btn.appendChild(btnText); btn.className = "clickMeBtn"; for(a of probArr){ div.append(a); div.append(btn); } out.append(div); } // This is what should happen on button/a click setTimeout(function(){ var clickedBtn = document.querySelector('.clickMeBtn'); if( clickedBtn != null ){ clickedBtn.addEventListener('click', function(e){ e.preventDefault(); console.log('click'); }); } }, 10000);变量的第一个实例。

关于如何使这个想法发挥作用的任何建议？

非常感谢!!

Answer 1

document.querySelector('.clickMeBtn');会返回找到的第一个元素，或null。

创建锚元素时附加click事件处理程序：

var btn = document.createElement("a");
btn.addEventListener('click', function(e){
  e.preventDefault();
  console.log('click');
});

Answer 2

我不是100％确定你的问题是什么。但我能看到的问题是你无法将侦听器绑定到尚未在DOM中创建的元素。所以我在这里可以看到3个选项：

1-在document.createElement()之上构建一个包装器，在addEventListener之上构建一个包装器，以便在创建元素后将事件绑定到元素。例如，您可以使用＆＃39;元素选择器＆＃39;来构建事件侦听器地图。作为键和调用值的功能。然后在创建元素后查找侦听器，并使用addEventListener将其绑定到该侦听器。

2-您可以像这样使用JQuery on（）方法：

// define the click handler for all buttons
$( document ).on( "click", "button", function() {
    alert( "Button Clicked!" )
});

/* ... some time later ... */

// dynamically add another button to the page
$( "html" ).append( "<button>Click Alert!</button>" );

来源：此JQuery脚本来自[here][1]

（编辑）3-您只需按照建议在创建后绑定它。虽然我认为你想要做更多高级的东西，比如从监听器中异步地动态添加元素。

Javascript - 创建动态元素，然后对元素进行点击操作

2 个答案: