jquery를 사용하여 콘텐츠를 동적으로 생성

Question

프레임에 링크를 올려 놓을 때 링크를로드하려하지만 작동하지 않습니다. 페이지에서 작성한 링크에이 함수를 사용하면 동적으로 작성한 링크를 사용할 때 작동하지 않습니다.

이

페이지

$('#user-tweets').append('<table class="tweets" width="320" border="0"><tr><td rowspan="1">' + 
    user + '</td><td rowspan="1">' + 
    date + '</td></tr><tr><td width="45"><a href="' + 
    profile_img + '"><img src="' + 
    profile_img + '" width="55" height="50"/></a></td><td width="186">' + 
    text + '<p><a href="' + url + '"target="_blank">' + 
    url + '</a></p></td></tr></table><hr>' 
); 

에 생성되는 ... 내가 가리키면 프레임으로 링크를 열이 기능을 사용하고있는 데이터이다.

$("a").hover(
    function() { 
    $(this).append($("<iframe src='"+this.href+"'></iframe>")); 
    }, 
    function() { 
    $(this).find("iframe:last").remove(); 
    } 
); 

Answer 1

당신은 .on()를 사용하여 위임 된 이벤트 핸들러를 사용합니다.

$('#user-tweets').on('mouseenter', "a", function() { 
    $(this).append($("<iframe src='"+this.href+"'></iframe>")); 
}).on('mouseleave', 'a', function() { 
    $(this).find("iframe:last").remove(); 
}); 

아이디어는 스크립트가 실행될 때 이미 존재하는 부모 요소에 처리기를 바인딩한다는 것입니다. 그런 다음 새 콘텐트에서 트리거 된 이벤트는 DOM 트리를 부모에게 버블 링하여 처리 할 수 ​​있습니다. 따라서 특정 selector가 존재하지 않더라도 특정 selector와 일치하는 모든 요소의 이벤트를 처리 할 수 ​​있습니다.