2013-06-03 2 views
3

이벤트를 바인드하는 여러 가지 방법을 알고 있고 조사했습니다. 은 1.9+에서 더 이상 사용되지 않습니다. 내가 만나는 문제는 동적 DOM 요소를 이벤트에 바인딩하는 것입니다.동적으로로드 된 요소로 jQuery 이벤트 바인딩

div에는 링크가 포함되어 있으며 페이지가 매겨져 있습니다. 링크는 AJAX로 동적으로로드됩니다. 나는이 링크들을 위해 묶인 이벤트를 덮어 쓰고 싶기 때문에 .unbind()을 사용하고 .on()을 시도했다. 문제는 이러한 동적으로로드 된 링크가 바인드되지 않는다는 것입니다. 선택기 $('#id_of_links')이 이전 링크 집합으로 캐시되기 때문입니다.

질문 : 는 사용자가 링크를 다음 페이지를 클릭 할 때 콜백을 설정하지 않고, 어느 시점에서 페이지에로드되는 모든 요소를 ​​결합 할 수 있습니까?

답변

11

동적으로 추가 된 요소들에 대해 당신이

$('#PARENT').on('click', '#DYNAMICALLY_ADDED_CHILD', function(){ CODE HERE }); 

부모가 이미 DOM 트리에 존재한다 그것의 부모 중 하나에 기능을 결합해야한다 ...

더 많은 정보 : http://api.jquery.com/on/

+0

고마워요. 이벤트를 동적으로 바인딩 해제하는 방법이 있습니까? –

+0

.on()의 반대 인 .off() 메소드가 있습니다. http://api.jquery.com/off/를 확인할 수 있습니다. 아직 시도하지 않았지만, 뭔가 가겠다 고 가정합니다. $ ('# PARENT')와 같습니다. off ('click', '#DYNAMICALLY_ADDED_CHILD', null); – YomY

-2

콜백 메서드/함수 또는을 반복하는 함수없이 모든 요소를 ​​바인딩 할 수 있습니다. 특정 특성이나 특성을 가진 요소에 적절한 함수가 바인드되어 시간이 지남에 따라 메모리 누수가 발생할 수 있습니다.

+1

당신을 이벤트를 부모에게 위임 할 수 있습니다 (@yomy 응답 참조). 그런 식으로 하나의 요소 만 이벤트와 연결되며 특정 자식 (on 메서드의 mentionnend)이 해당 요소를 실행할 때만 실행됩니다. 이것은 메모리 누수의 반대입니다.) –

+0

@ CyrilN.Alright, 그것을 보여줘서 고마워. '.on()'메소드의 기능에 대해 더 많은 것을 읽을 필요가있다. –

+1

당신은 매우 흥미롭고 앞으로 당신을 크게 도울 것입니다 : –

관련 문제