代码之家 › 专栏 › 技术社区 › Sergio

Javascript-创建动态元素,然后在元素单击时执行某些操作

dynamic function html javascript

Sergio · 技术社区 · 8 年前

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

我有一些在DOM中动态创建元素的脚本,其中一个是按钮/a。我希望该按钮/a在用户单击后可以执行某些操作。现在什么都没有发生,但如果我添加 setTimeout 在单击后发生的事情上,然后它就可以工作了-只让我在第一个元素的单击(按钮/a)时做一些事情。但是我不能依靠 设置超时 使这段代码正常工作。

这里或多或少是我没有 设置超时 方法:

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

这是 设置超时 方法:

// 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);

这类作品。。。让我只点击 clickedBtn 变量

关于如何让这个想法发挥作用,有什么建议吗?

谢谢!!

2 回复 | 直到 8 年前

Igor 8 年前

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

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

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

nuvio 8 年前

我不能百分之百确定你的问题是什么。但我看到的问题是,您无法将侦听器绑定到DOM中尚未创建的元素。因此,我可以在这里看到3个选项:

1-在 document.createElement() 上面还有一个包装 addEventListener 在创建事件后将其绑定到元素。例如,您构建 事件侦听器的映射 首先,“元素选择器”为钥匙和函数调用为价值 . 然后,在创建元素并使用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-按照建议,您只需在创建后进行绑定。虽然我认为您想做更高级的事情,比如从监听器异步动态添加元素。