jQuery가 예상대로 작동하지 않습니다. 이유가 무엇입니까?

Question

사용자 의견 페이지가 있습니다.

$(p).click(function(){ 

    $(this).hide(200); 
}); 

사용자가 일부 의견을 클릭하면 대개이 메시지가 사라집니다. 좋아, 완벽하게 작동합니다.

그러나 사용자가 서버 응답과 같은 수행 할 때이 더 이상

서버 응답이

서버 응답은 다음과 같습니다 (즉, 사용자 정의 AJAX를 매기기) 테이블에있는 다음 코멘트 무리가 작동하지 않습니다

<p id="next-id1">bla bla bla 1</p> 
<p id="next-id2">bla bla bla 2</p> 

그런 다음이 응답은 MySQL의 테이블에서 첫번째 주석이 포함 특정 DIV 후 내용을 삽입

같은 : 내가 말했듯이

$("#snow-next-btn").click(function(){ 

$.post('/paginator.php', {}, function(response){ 

    $("#comment-div").after(response); 

}); 

}); 

확인을 완벽하게 작동합니다. 하지만이 방법은 :

$(p).click(function){ 
    $(this).hide(200); 
} 

더 이상 서버 응답 작동하지 않습니다 (하지만 여전히 페이지로드 PHP에 의해 인쇄 된 내용으로 작동).

어디에 문제가 있습니까?

Answer 1

당신은 selector 매개 변수 (두 번째 인수)와 .on()를 사용해야합니다 :

$(document).on('click', 'p', function() { 
    $(this).hide(200); 
}) 

나는 당신의 마크 업을 볼 수 없습니다, 그래서 p에 가장 가까운 부모가 무엇을 이야기하지만, document을 대체 할 수 p의 가장 가까운 부모, 그래서 예를 들어 마크 업입니다

는

<div id="bla"> 
    <p>...</p> 
    <p>...</p> 
    <p>...</p> 
</div> 

당신은 쓸 거라고

로 docs 가입일 5,

$('#bla').on('click', 'p', function() { 
    $(this).hide(200); 
}) 

는 :

선택기가 제공된다

이벤트 핸들러 위임로 지칭된다. 이벤트가 바운딩 요소 에서 직접 발생하지만 이 선택 자와 일치하는 하위 항목 (내부 요소)에 대해서만 처리기가 호출되면 처리기가 호출되지 않습니다.

위임 된 이벤트는 나중에 문서에 추가 된 하위 요소 인 의 이벤트를 처리 할 수 ​​있다는 이점이 있습니다. 위임 된 이벤트 처리기가 연결될 때 제공되는 요소를 선택하면 위임 된 이벤트를 에 자주 사용하여 이벤트 처리기를 자주 연결하거나 제거하지 않아도됩니다.

Answer 2

이벤트 처리기가 서버의 응답에서 삽입되는 새 요소에 바인딩되지 않았습니다. 대신 $.click()를 사용하는 $.on()을 사용 : 새로운 요소가 와서

$(document).on("click", "p", function(){ 
    $(this).hide(200); 
}); 

, 그들은 당신을 위해 바인딩됩니다. 유일한 해결책은 서버 응답에서 새로운 요소가 들어올 때 끊임없이 새로운 요소에 바인딩하는 것입니다. JQuery가 무거운 짐을 덜어 주도록하십시오.