jQuery를 동적으로로드 된 파일에서 요소 ID를받지

Question

나는 클릭 DIV ID를 얻을이 코드를 가지고 :

$(document).ready(function(){ 
    $(".playitem").click(function(){ 
     pos = this.id; 
     alert(pos); 
    }); 
}); 

을 그리고 이것은 HTML 코드입니다

<div class="playitem" id="item-123456"> 
code here... 
</div> 

이 어떻게 문서를 동적으로로드입니다 :

$("#videoplaylist .left").load("extern1.htm"); 

이 html 코드가 현재 html 파일에있는 동안 모든 것이 작동합니다. 그러나, 동적으로 동일한 html 코드로 외부 HTML 문서를로드하고 동일한 div에이 jQuery 함수가 작동을 멈 추면.

어떤 조언이 필요합니까? 미리 감사드립니다.

Answer 1

새 파일의 DOM 요소는 클릭 이벤트 핸들러를 바인딩 할 때 아직 사용할 수 없기 때문입니다. 이

$(".playitem").length === 0 

JQuery와 선택기에는 요소 ... 없습니다 그리고 당신이 그 항목에 클릭 이벤트 처리기를 바인딩로 이동하는 경우, jQuery를 밖으로 오류가되지 않습니다, 그것은 단지에 클릭 이벤트 처리기를 바인딩하지 않습니다 아무것도.

Live 메서드를 사용해보십시오. 그러면 선택기와 일치하는 현재 및 미래의 모든 DOM 요소에 클릭 이벤트 핸들러가 바인딩됩니다.

$(document).ready(function(){ 
    $(".playitem").live('click', function(){ 
     pos = this.id; 
     alert(pos); 
    }); 
}); 

또는 DOM 요소가로드 된 후 새 DOM 요소를로드 한 다음 클릭 메소드를 다시 바인딩 할 수 있습니다.

참고 : 당신은뿐만 아니라 (마우스 오버, 키 누름 등)

Answer 2

사용 live 기능을 다른 이벤트 핸들러의 모든과 Live 방법을 사용할 수 있습니다.

$(document).ready(function(){ 
    $(".playitem").live("click", function(){ 
     pos = this.id; 
     alert(pos); 
    }); 
}); 

Answer 3

로드 후 FireBug 또는 IEDeveloperToolbar를 사용하여 브라우저가 실제로 사용하는 HTML을 분석해보십시오. 결과가 예상 한 것과 다를 수 있습니다.

또한 이벤트 순서를 검사해야합니다. document.ready 함수 이후에로드가 발생하면 요소가 아직 존재하지 않으므로 click 이벤트가 연결되지 않습니다.

Answer 4

onload에 jquery 함수를 바인딩해야합니다.이 파일을 파일 내부에 넣으려면이 함수를 바인딩해야합니다.

현재 구현되기 전에 구현 중이므로 생성 될 때 호출해야합니다.

Answer 5

Sneakyness가 말했듯이 라이브 메소드가 브라우저를 느리게 만드는 것처럼 코드를 파일 내부에 두는 것이 좋습니다. 이 오래된 질문에 대한

Answer 6

그냥 취소 업데이 트합니다 ... live으로 는 당신이 더 delegate 이벤트와 on를 사용하여 jQuery를 1.7부터 사용되지 않습니다.

$ (selector) .live (events, data, handler); // jQuery 1.3+

$ (document) .delegate (selector, events, data, handler); // jQuery 1.4.3+

$ (document) .on (events, selector, data, handler); // jQuery를 1.7+

대신

$(".playitem").live('click', function(){ 
    pos = this.id; 
    alert(pos); 
}); 

는

사용이

$("body").on('click', '.playitem', function(){ 
    pos = this.id; 
    alert(pos); 
});