동적으로 생성 된 html 요소가 작동을 멈춤

Question

다음 코드에서 jQuery를 사용하여 div에 표시된 배열에 몇 가지 주석이 있습니다. 각 댓글에는 새로운 댓글을 게시 할 때까지 제대로 작동하는 옵션 버튼이 있습니다. 각 요소에 대해 고유 ID를 사용했지만 사용하지 못했습니다.

페이지가로드되면 옵션 버튼이 작동합니다. 하지만 새로운 설명을 제출하면 버튼이 작동하지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

여기 내 스크립트입니다 :

var i = 0; 
var comments_display= ""; 
var comments = ['Hello World!', 'Hello! This is a comment.']; 

//reads the entire array, creates the content, and sends it to the div 
function show_comments(){ 
    for (i=0; i<comments.length; i++){ 
    comments_display += "<div class='single_comment_container'>"; 
    comments_display += "<div class='comment_comment'>" + comments[i] + "</div>"; 
    comments_display += "<div class='options'>Options</div></div>"; 
    } 
    $("#comment_container").html(comments_display); 
    comments_display = ""; 
} 

//appends a new comment to the array 
function new_comment(){ 
    if ($("#comment_input").val() == null || $("#comment_input").val() == ""){ 
     alert("Your comment must be at least 1 character long."); 
    } 

    else{ 
     comments.push($('#comment_input').val()); 
     show_comments(); 
     $("#comment_input").val(""); 
    } 
} 

$(document).ready(function(){ 
    show_comments(); 

    $("#submit_comment").click(function(){ 
     new_comment(); 
    }); 

//display a message when an element of the class 'options' is clicked 
$(".options").click(function(){ 
    alert("OPTIONS"); 
}); 

}); 

그리고 여기에 어떻게 작동하는지 확인하기 위해 바이올린입니다. http://jsfiddle.net/fahKb/3/

시간을내어이 질문을 읽어 주셔서 감사합니다.

$(document).on('click', '.options', function() { 
    alert("OPTIONS"); 
}); 

http://api.jquery.com/on/

참고 :

Answer 1

당신은 위임을 사용할 필요가 당신은 document 이외의 정적 요소를 사용 할 수 있습니다. (일부 부모는 항상 div입니다. 항상 페이지에있는 것이거나 같습니다.)

Answer 2

요소를 동적으로 추가하기 때문에 클릭이 작동하지 않으므로 페이지에서 가장 가까운 기존 부모를 찾아야합니다. http://jsfiddle.net/fahKb/4/

$('#comment_container').on('click',".options",function(){ 
    alert("OPTIONS"); 
}); 

Answer 3

$(document).on('click', '.options', function() { 
    alert("OPTIONS"); 
}); 

이 첫 번째 응답이 옳다, 이것의 원인 요소가 DOM에로드 할 때 이벤트 리스너를 할당하는 것이 있습니다 :이 comment_container와는 .on() 핸들러를 사용합니다. 근본적으로 이것이 '클릭 된'다음 무언가를하는 경우 이봐. 문제는 새 요소를 추가 할 때 이벤트 리스너를 추가하지 않았기 때문입니다. 위의 코드와 같은 일을함으로써 본질적으로 문서 내의 모든 항목을 검색 한 다음 ".options"클래스를 가지고 마지막으로 클릭 한 다음 일부 코드를 실행하고 실행하는 것입니다.

위와 같이 문서를 사용하는 것이 가장 최적의 방법은 아니지만 때때로 필요합니다. 더 나은 해결책은 만약 당신이 "div"또는 다른 어떤 요소를 주석으로 싸서 문서의 위치에 전달한다면 말입니다. 이렇게하면 전체 문서에서 '.options'를 검색하는 대신 래퍼 만 검색하여 불필요한 작업을 많이하지 않아도됩니다.

$('.commentWrapper').on('click', '.options', function() { 
    alert("OPTIONS"); 
});