이벤트 처리기가 동적 콘텐츠에서 작동하지 않음

이벤트 처리기가 동적 콘텐츠에서 작동하지 않음

이 질문에는 이미 다음과 같은 답이 있습니다.

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

마감됨8년 전에.

저는 A 태그가 있는데, 이 태그를 클릭하면 다른 B 태그가 추가되어 클릭 시 B 작업을 수행합니다.그래서 제가 태그 B를 클릭하면 액션 B가 수행됩니다.하지만, 그.on메서드가 동적으로 생성된 태그 B에서 작동하지 않는 것 같습니다.

A 태그에 대한 나의 html과 jquery는 아래와 같습니다.

<a id="address" class="add_address btn btn-inverse btn-medium pull-right push-top">Add Shipping address</a>

$('.add_address').click(function(){
    //Add another <a>
    $(document).append('<a id="address"  class="pull-right update btn btn-inverse btn-medium push-top">Update</a>');
})

태그 B를 클릭하면 일부 작업 B가 수행됩니다.제 jquery는 아래와 같습니다.

$('.update').on('click',function(){
  //action B
});

클래스 ".update"가 있는 비동적 콘텐츠도 있습니다.에서.on()위의 방법은 비동적인 내용에는 적합하지만 동적인 내용에는 적합하지 않습니다.

어떻게 하면 동적 콘텐츠에 적합하게 만들 수 있습니까?

선택기 매개 변수를 추가해야 합니다. 그렇지 않으면 이벤트가 위임되지 않고 직접 바인딩됩니다. 이는 요소가 이미 존재하는 경우에만 작동합니다(따라서 동적으로 로드된 콘텐츠에서는 작동하지 않습니다).

http://api.jquery.com/on/ #직접 및 간접 참조

코드를 다음으로 변경

$(document.body).on('click', '.update' ,function(){

jQuery 세트는 이벤트를 수신한 다음 인수로 지정된 셀렉터와 일치하는 요소로 이벤트를 위임합니다.이것은 사용할 때와는 반대로live코드를 실행할 때 jQuery set 요소가 있어야 합니다.

이 답변은 많은 관심을 받기 때문에 다음 두 가지 추가 조언이 있습니다.

가능하면 이벤트 수신기를 가장 정확한 요소에 바인딩하여 불필요한 이벤트 처리를 방지합니다.

즉, 클래스 요소를 추가하는 경우b기존 id 요소로a그럼 사용하지 마

$(document.body).on('click', '#a .b', function(){

그러나 사용

$('#a').on('click', '.b', function(){

ID가 있는 요소를 추가할 때는 요소를 두 번 추가하지 않도록 주의해야 합니다.HTML에서 동일한 id를 가진 두 개의 요소를 갖는 것은 "불법"일 뿐만 아니라 많은 것을 깨뜨립니다.예를 들어 선택기"#c"이 ID를 가진 요소 하나만 검색합니다.

선택기를 찾을 수 없습니다..on함수:

.on(eventType, selector, function)

이 선택기는 매우 중요합니다!

http://api.jquery.com/on/

새 HTML이 페이지에 주입되는 경우 새 HTML이 페이지에 배치된 후 요소를 선택하고 이벤트 핸들러를 첨부합니다.또는 위임된 이벤트를 사용하여 이벤트 핸들러를 첨부합니다.

자세한 내용은 jQuery 1.9.live()를 참조하십시오.

언급URL : https://stackoverflow.com/questions/15090942/event-handler-not-working-on-dynamic-content