jQuery를 사용하여 동적 HTML 요소에 이벤트를 첨부하려면 어떻게 해야 합니까?

jQuery를 사용하여 동적 HTML 요소에 이벤트를 첨부하려면 어떻게 해야 합니까?

이 질문에는 이미 답변이 있습니다.

동적으로 생성된 요소에 대한 이벤트 바인딩? (23개 답변)

닫힘7년 전.

클래스가 있는 모든 요소에 이벤트 핸들러를 부가하는 jQuery 코드가 있다고 가정합니다..myclass.

예를 들어 다음과 같습니다.

$(function(){
    $(".myclass").click( function() {
        // do something
    });
});

그리고 나의 HTML은 다음과 같습니다.

<a class="myclass" href="#">test1</a>
<a class="myclass" href="#">test2</a>
<a class="myclass" href="#">test3</a>

그것은 문제없습니다.단, 다음 조건을 고려해 주십시오..myclass요소는 나중에 페이지에 작성되었습니다.

예를 들어 다음과 같습니다.

<a id="anchor1" href="#">create link dynamically</a>
<script type="text/javascript">
$(function(){
    $("#anchor1").click( function() {
        $("#anchor1").append('<a class="myclass" href="#">test4</a>');
    });
});
</script>

이 경우,test4사용자가 클릭할 때 링크가 생성됩니다.a#anchor1.

그test4링크에는 다음 항목이 없습니다.click()관련지어져 있는 핸들러입니다만,class="myclass".

기본적으로, 저는 이 글을 쓰고 싶습니다.click()페이지 로드 시 존재하는 콘텐츠와 나중에 AJAX/DHTML을 통해 반입되는 콘텐츠에 모두 적용되는 핸들러입니다.이 문제를 어떻게 해결할 수 있을까요?

이후 jQuery 릴리즈의 변경 사항을 반영하기 위해 새로운 답변을 추가합니다..live() 메서드는 jQuery 1.7에서 권장되지 않습니다.

http://api.jquery.com/live/ 에서

jQuery 1.7에서는 .live() 메서드는 권장되지 않습니다.이벤트 핸들러를 부가하려면 .on()을 사용합니다.이전 버전의 jQuery 사용자는 .live()보다 .delegate()를 사용해야 합니다.

jQuery 1.7+의 경우 .on()을 사용하여 이벤트핸들러를 부모 요소에 부가하고 'myclass'와 결합된 셀렉터를 인수로 전달할 수 있습니다.

http://api.jquery.com/on/ 를 참조해 주세요.

그래서 대신...

$(".myclass").click( function() {
    // do something
});

쓸 수 있어요...

$('body').on('click', 'a.myclass', function() {
    // do something
});

이 기능은 본문에 'myclass'가 있는 모든 태그에 대해 작동합니다(이미 존재하든 나중에 동적으로 추가하든 상관없습니다.

이 예에서는 static surrounding 태그가 거의 없기 때문에 본문 태그가 사용되지만 .on 메서드콜 발생 시 존재하는 부모 태그는 모두 동작합니다.예를 들어 동적 요소가 추가되는 목록의 ul 태그는 다음과 같습니다.

$('ul').on('click', 'li', function() {
    alert( $(this).text() );
});

ul 태그가 존재하는 한, 이것은 동작합니다(li 요소는 아직 존재하지 않습니다).

(가장 많이 투표된 답변)을 실행하는 것만으로는 충분하지 않을 수 있습니다.

$('body').on('click', 'a.myclass', function() {
    // do something
});

이는 이벤트핸들러가 기동하는 순서 때문에 문제가 될 수 있습니다.이 작업을 하고 있는데 처리 순서 때문에 문제가 발생한 경우.이 기능을 함수로 정리할 수 있습니다.이 함수는, 「리프레쉬」라고 불리면, 리스너를 「리프레쉬」합니다.

예를 들어 다음과 같습니다.

function RefreshSomeEventListener() {
    // Remove handler from existing elements
    $("#wrapper .specific-selector").off(); 

    // Re-add event handler for all matching elements
    $("#wrapper .specific-selector").on("click", function() {
        // Handle event.
    }
}

이 기능은 기능이기 때문에 청취자를 이렇게 설정할 때마다 일반적으로 문서 준비 상태로 호출합니다.

$(document).ready(function() {
    // Other ready commands / code

    // Call our function to setup initial listening
    RefreshSomeEventListener();
});

다음으로 동적으로 추가된 요소를 추가할 때마다 해당 메서드를 다시 호출합니다.

function SomeMethodThatAddsElement() {
    // Some code / AJAX / whatever.. Adding element dynamically

    // Refresh our listener, so the new element is taken into account
    RefreshSomeEventListener();
}

이게 도움이 됐으면 좋겠네요!

안부 전해요,

jQuery 1.7 이후 권장되는 메서드는 .on() 및 .off()입니다.

션의 대답은 예를 보여준다.

현재 권장되지 않음:

jQuery 함수 및 .jQuery 1.3.x에서 사용 가능

문서에서:

누를 때마다 각 단락의 텍스트를 알림 상자에 표시하려면:

$("p").live("click", function(){
  alert( $(this).text() );
});

또한 livequery 플러그인은 이를 수행하고 더 많은 이벤트를 지원합니다.

DOM에 앵커 더미를 추가하는 경우 대신 이벤트 위임을 검토하십시오.

다음은 간단한 예입니다.

$('#somecontainer').click(function(e) {   
  var $target = $(e.target);   
  if ($target.hasClass("myclass")) {
    // do something
  }
});

클릭 한 번으로 모든 요소의 페이지에 이벤트를 바인딩할 수 있습니다.이 이벤트는 이미 해당 페이지에 있는지, 또는 향후에 도착할 예정인지에 관계없이 다음과 같이 할 수 있습니다.

$(document).bind('click', function (e) {
   var target = $(e.target);
   if (target.is('.myclass')) {
      e.preventDefault(); // if you want to cancel the event flow
      // do something
   } else if (target.is('.myotherclass')) {
      e.preventDefault();
      // do something else
   }
});

한동안 쓰고 있었어요.마법처럼 작동한다.

1.7jQuery 1.7을 사용하는 ..on()방식 " " " "가 아닌 다른 이벤트 위임 입니다..bind()아직 동작하고 있습니다.

현재 및 미래에 일치하는 모든 요소에 대해 이벤트에 핸들러를 바인딩합니다(클릭과 같음).커스텀 이벤트를 바인드 할 수도 있습니다.

링크 텍스트

$(function(){
    $(".myclass").live("click", function() {
        // do something
    });
});

jQuery 1.3+의 경우 .live()를 사용합니다.

현재 및 미래에 일치하는 모든 요소에 대해 이벤트에 핸들러를 바인딩합니다(클릭과 같음).커스텀 이벤트를 바인드 할 수도 있습니다.

''를 사용하려고 .live()기능.문서를 참조해 주세요.

예를 들어 다음과 같습니다.

$("#anchor1").live("click", function() {
    $("#anchor1").append('<a class="myclass" href="#">test4</a>');
});

언급URL : https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery