나중에 어려움을 겪고있는 사람을 참조 할 수 있도록 확인란을 동적으로 추가하면 올바른 위 대답 이 작동하지 않습니다. 부모 노드가 특정 하위 항목에서 버블 링 된 이벤트를 캡처하고 콜백을 발행 할 수 있도록하는 이벤트 위임 을 활용해야합니다 .
// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
if(this.checked) {
// checkbox is checked
}
});
document부모 선택기 에 사용할 필요는 거의 없습니다 . 대신 이벤트가 너무 많은 레벨로 전파되지 않도록보다 구체적인 상위 노드를 선택하십시오.
아래 예제는 동적으로 추가 된 dom 노드의 이벤트가 이전에 정의 된 리스너를 트리거하지 않는 방법을 보여줍니다.
$postList = $('#post-list');
$postList.find('h1').on('click', onH1Clicked);
function onH1Clicked() {
alert($(this).text());
}
// simulate added content
var title = 2;
function generateRandomArticle(title) {
$postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}
setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
<article class="post">
<h1>Title 1</h1>
</article>
<article class="post">
<h1>Title 2</h1>
</article>
</section>
이 예제는 특정 노드 ( h1이 경우)에 대한 이벤트를 캡처하고 해당 이벤트에 대한 콜백을 발행 하기 위해 이벤트 위임 사용법을 표시 합니다.
$postList = $('#post-list');
$postList.on('click', 'h1', onH1Clicked);
function onH1Clicked() {
alert($(this).text());
}
// simulate added content
var title = 2;
function generateRandomArticle(title) {
$postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}
setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
<article class="post">
<h1>Title 1</h1>
</article>
<article class="post">
<h1>Title 2</h1>
</article>
</section>