개발 무지렁이

[jQuery] 동적 엘리먼트에 event를 적용하는 on 본문

Frontend/JavaScript

[jQuery] 동적 엘리먼트에 event를 적용하는 on

Gaejirang-e 2023. 4. 20. 02:51
📌. on() 함수는 정적 또는 동적 element에 이벤트를 적용할 수 있다.

$( ).on("이벤트종류", function(){ })


정적 element에 이벤트 등록

  $(function() {
      $("#chkAll").on("click", function() {
          // chkAll을 클릭하면 모든 checkbox를 선택 or 해지
          // alert(this.checked);
          $(":checkbox").prop("checked", this.checked);

          if(this.checked) {
              $("span").text("전체해지");
          } else {
              $("span").text("전체선택");
          }
      });
  });

$(document).on("이벤트종류", "이벤트대상", function(){ })


동적으로 새로 생성된 element이벤트 등록
(.click()은 잘 적용되지 않는다.)

  $(function() {
      $(document).on("click", "[name=remove]", function() {
          if(confirm("정말 삭제하시겠습니까?")) {
              localStorage.removeItem($(this).attr("data-removeInfo"));    
              getInfo();
          }
      });
  }); //ready End
Comments