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

jQuery를 사용하여 동적 HTML 요소에 이벤트를 어떻게 첨부합니까? [복제]

---

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

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

class로 모든 요소에 이벤트 핸들러를 연결하는 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'가있는 모든 태그에서 작동합니다.

본문 태그는 예제에 더 가까운 정적 주변 태그가 없었기 때문에 사용되지만 .on 메소드 호출이 발생할 때 존재하는 모든 상위 태그는 작동합니다. 예를 들어 동적 요소가 추가되는 목록의 ul 태그는 다음과 같습니다.

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

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

---

때로는이 작업 (최고의 답변) 이 항상 충분하지는 않습니다.

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

order 이벤트 처리기가 시작 되었기 때문에 문제가 될 수 있습니다. 이 작업을 수행하지만 처리 된 순서로 인해 문제가 발생하는 경우에는 항상 리스너를 "새로 고침"하는 함수로 래핑 할 수 있습니다.

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

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 후에 바람직한 방법은 CSTE 연구진 () 과 .OFF ()

Sean의 답변 은 예를 보여줍니다.

더 이상 사용되지 않습니다.

JQuery와 함수를 사용 .live()하고 .die(). 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
  }
});

---

현재 및 미래에 일치하는 모든 요소에 대해 처리기를 클릭과 같은 이벤트에 바인딩합니다. 사용자 정의 이벤트를 바인딩 할 수도 있습니다.

링크 텍스트

$(function(){
    $(".myclass").live("click", function() {
        // 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
   }
});

한동안 사용했습니다. 매력처럼 작동합니다.

jQuery 1.7 이상에서는 .on()바인드 또는 다른 이벤트 위임 방법 대신 사용하는 것이 좋지만 .bind()여전히 작동합니다.

---

jQuery 1.3 이상이라면을 사용하십시오. 라이브()

현재 및 미래에 일치하는 모든 요소에 대해 처리기를 클릭과 같은 이벤트에 바인딩합니다. 사용자 정의 이벤트를 바인딩 할 수도 있습니다.

---

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