동적으로 생성 된 div에 대한 이벤트 핸들러 바인딩 문제

Question

경고 창에서 클릭 한 div의 ID를 화면에 표시하는 데 문제가 있습니다. 나는 이것이 컨트롤과 이벤트 핸들러의 순서가 페이지에 추가 되었기 때문에 이것이 확실하다고 확신한다. 그러나 다른 방법을 시도한 후에 나는 이것을 작동시키지 못한다. 불행히도 나는 DivX가 ajax get 요청으로부터 생성되기 때문에 재현 가능한 코드를 게시 할 수 없다.

$(document).ready(function() { 
    $.getJSON('ClientPortal/GetSkills', function (data) { 
     var test = 'poo'; 
     $.each(data, function (data) { 
      $('#flipContainer').append("<div class=flip id='" + this.Value + "' value='" + this.Value + "'>" + this.Text + "<//div>"); 
     }) 
    }) 
}) 

$(document).ready(function() { 
    $(".flip").on('click', function() { 
     alert($(this).attr("id")); 
    }) 
}) 

Answer 1

이 시도 :

$(document).ready(function() { 
    $("#flipContainer").on("click", ".flip", function() { 
     alert($(this).attr("id")); 
    }) 
}) 

당신은 효과적으로 당신이 DOM 준비 이벤트가 발생이 ...하지만이 구문을 사용하여, 당신은 온 바인딩을 위임 할 때 기존 요소에 결합 클릭 기반으로해야 기존 요소가 있지만 첫 번째 원소를 포함하는 다른 요소에 적용됩니다 ... on (줄 "selector")에 대한 jQuery 설명서를 참조하십시오 : http://api.jquery.com/on/#on-events-selector-data-handlereventObject.