JS實現為動態創建的元素添加事件操作示例

2019-11-19 14:08:43

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JS實現為動態創建的元素添加事件操作。分享給大家供大家參考，具體如下：

html中直接生成的元素，添加事件，我們都知道，但是如何為一個動態生成的元素添加事件呢，jquery中的live方法可以做到這一點

具體實現可以在demo中看到

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>m.survivalescaperooms.com - JS實現為動態創建的元素添加事件</title>    <script src="js/lib/jquery-1.7.2.min.js"></script>  </head>  <body>    <button id="btn">添加事件</button>    <div id="panel"></div>    <script>//   js原生實現//     var btn=document.getElementById("btn");//     btn.onclick=function(){//       var arr= [];//       for(var i=0;i<10;i++){//         arr.push("<p id='nep'>"+i+"</p>");//       }////     document.getElementById("panel").innerHTML=arr.join('<br/>');//     }//      //jquery部分實現      $("#btn").click(function(){        var arr= [];        for(var i=0;i<10;i++){          arr.push("<p id='nep'>"+i+"</p>");        }        $("#panel").html(function(){          return arr.join("<br/>");        });      });      //為動態創建的html標簽元素添加事件      $("#nep").live("click",function(){        var that=$(this);//獲取當前點擊的this對象        console.log(that.text());      });    </script>  </body></html>

運行結果：