jQuery - iframe에서 동적으로 생성 된 요소에 대한 이벤트 바인딩

Question

iFrame 내의 각 앵커에 onClick 이벤트 처리기를 바인딩하고 싶습니다. iframe을 IM/채팅 클라이언트로 간주하므로 iframe로드 시간에 앵커 링크가 없습니다. 나는 iFrame 소스를 제어 할 수 없기 때문에 앵커는 어떤 속성도 설정할 수 없습니다.

이 주제가 여러 번 논의되었지만 iFrame으로 예제를 찾을 수 없으며 상당한 양의 읽기 후에 성공하지 못했습니다.

나는 .on()을 사용해야 함을 알고 있습니다. (나는 오류를 얻을

// wait for frame to load 
$('#chatFrame').on('load', function(){ 

    $('#chatFrame').on('click', 'a', function(e){ 
     e.preventDefaults(e); 
     alert("link clicked!"); 
    }); 
}); 

하지만 경고가 클릭에 해고되지 않고 링크는 새 창으로 나를 취

HTML :

<iframe src="https://...." scrolling="no" id="chatFrame"></iframe> 

JS Heres는 내가 무엇을 예상 된 기본 동작으로).

누구나 이러한 iFrame 앵커에 바인딩하는 방법에 대해 조언 할 수 있습니까?

Answer 1

contents()을 사용하여 iframe 내부로 들어가야합니다. 해당 창에있는 요소에 액세스하고있는 일이 또한 iframe이 페이지와 동일한 도메인에있는 것으로 가정 또는 당신이되지 않습니다

$('#chatFrame').on('load', function(){ 
    $(this).contents().find('body').on('click', 'a', function(e){ 
     e.preventDefault(e); 
     alert("link clicked!"); 
    }); 
}); 

을 시도 $('iframe a')

처럼되지 않도록 iframe이는 자신의 창을 가지고 그것에 접근 할 수있다