jquery는 DOM에 추가 된 요소와 상호 작용합니다.

Question

나는 '편집자 선택'과 같이 댓글에 수업을 추가하기 위해 워드 프레스 플러그인을 사용하고 있습니다.

페이지에는 의견을 표시하는 단추와 편집자 추천을 표시하는 단추가 있습니다. 모두 잘 작동합니다.

코드 : -

$(document).ready(function() { 


    $("#editors-picks").on("click", function(e){ 

     $("ol.commentlist li").not(".featured").fadeOut(); // fade out any comments that aren't 'featured' 

    }); 
    $("#comments").on("click", function(e){ 

     $("ol.commentlist li").not(".featured").fadeIn(); // fade all comments back in 

    }); 
}); 

문제는 코멘트를 동적으로 (아약스를 통해) DOM 트리에 추가합니다. 새로운 설명이 추가 된 후 기능이 작동하지 않습니다. .on을 사용하면이 문제를 해결할 수 있다고 생각했지만 그렇지 않습니다.

Answer 1

"함수가 작동하지 않는다"는 것은 단추가 응답하지 않는다는 것을 의미하기 때문에 요소 자체가 아니라 문서에 수신기를 위임 할 수 있습니다. 예를 들면 : 당신이 오래된 것들, 나는 모르는 않지만 새로 추가 된 의견이 기능에 의해 영향을받지 않는 것을 의미하는 경우

는

$(document).on("click","#editors-picks", function(e){ 

    $("ol.commentlist li").not(".featured").fadeOut(); // fade out any comments that aren't 'featured' 

}); 

그러나,이 방법이 될 수 있습니다.