jQuery를 사용하여 동적 HTML 요소에 이벤트를 넣는 방법

 

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

---

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

예를 들면 :

$(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>
                                

이 경우 a#anchor1 test4 링크가 생성됩니다.

test4 class="myclass" 가 있어도 연결된 click() 핸들러가 없습니다.

기본적으로 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'와 결합 된 a 선택기를 인수로 전달할 수 있습니다.

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 요소가 필요하지 않음).

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