집 > 기사 > 웹 프론트엔드 > JS를 사용하여 동적으로 생성된 요소에 이벤트를 추가하는 단계에 대한 자세한 설명

JS를 사용하여 동적으로 생성된 요소에 이벤트를 추가하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-10 13:56:252424검색

이번에는 JS를 사용하여 동적으로 생성된 요소에 이벤트를 추가하는 단계에 대해 자세히 설명하겠습니다. JS를 사용하여 동적으로 생성된 요소에 이벤트를 추가할 때의 주의사항은 무엇인가요?

우리 모두는 HTML에서 직접 생성된 요소에 이벤트를 추가하는 방법을 알고 있지만, 동적으로 생성된 요소에 이벤트를 추가하는 방법은 jquery의 live 메서드로 수행할 수 있습니다.

구체적인 구현은 데모

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JS实现为动态创建的元素添加事件</title>
    <script src="js/lib/jquery-1.7.2.min.js"></script>
  </head>
  <body>
    <button id="btn">添加事件</button>
    <p id="panel"></p>
    <script>
//   js原生实现
//     var btn=document.getElementById("btn");
//     btn.onclick=function(){
//       var arr= [];
//       for(var i=0;i<10;i++){
//         arr.push("<p id=&#39;nep&#39;>"+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=&#39;nep&#39;>"+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>

에서 볼 수 있습니다.

Run 결과:

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!