JS为循环动态生成的节点添加点击事件

最新推荐文章于 2022-09-09 14:48:32 发布

原创最新推荐文章于 2022-09-09 14:48:32 发布 · 1.8w 阅读

11 ·

CC 4.0 BY-SA版权

WEB前端专栏收录该内容

12 篇文章

订阅专栏

本文探讨了在JavaScript中动态创建input按钮，并讨论了如何为这些按钮绑定点击事件。文章对比了几种不同的绑定方法，包括使用setAttribute和addEventListener，同时指出了jQuery中live和on方法在某些情况下的局限性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

举例代码如下：
<script>
  var a=1;
 for(var i=0;i<7;i++){
     var input=document.createElement("input");
      input.className="cd";
      input.value="查看详情";
      input.type="button";
}
</script>

这时想要为input标签添加一个点击事件，查找资料得知：

不可行方案：

1.使用JQuery的live方法但是在jquery新版本中这个方法被移除

$("input").live("click",function

(){

      //do something here

});

2.使用JQuery的on方法，但是html生成后，点击后的效果并不是预想的（比如回调函数只是进行一次弹窗，点击后会弹窗三次）具体没有细究，总之没有达到预想的效果

$("#testdiv ul").on("click","li",function()
 {
     //do something here
 });

3.jquery的click方法

$('input').click(function(){}) 没反应

可行方案：

1.input.setAttribute("onclick", "a()");

2.input.addEventListener("click", a, false);（IE不支持，用IE要改成input.attachEvent("onclick", a);）

3.如果想访问该事件本身的元素的属性：

$('<input type="checkbox" οnclick="selectBox(event)" value="1"/>')

function selectBox(event){
    var e=event||window.event;
    alert(e.target.value);
}