jQuery 변경 블러 이벤트는 목록의 첫 번째 요소에 대해서만 작동합니다.

Question

문제가 있습니다 - 내 jQuery 변경 블러 이벤트가 동적으로 생성 된 목록의 첫 번째 요소에서만 작동합니다. 이 문제를 어떻게 해결할 수 있습니까?

내가 만든 요소 (잘 약화 버전) 여기에서 찾을 수 있습니다 : http://jsfiddle.net/kfm5b/2/

jQuery를

$('.roomFac').on("change blur", function() { 
    var park = $("#park2").val(); 
    var lecturestyle = $("#lecture_style2").val(); 
    var roomstructure = $("#room_structure2").val(); 
    var groupsize = $("#groupSize2").val(); 
    var facilities = ""; 
    $('select[name*=roomFac]').each(function() { 
     facilities += $(this).val(); 
     facilities += ","; 
    }); 
    var dataString = 'park=' + park + '&' + 'lecturestyle=' + lecturestyle + '&' + 
     'roomstructure=' + roomstructure + '&' + 'groupsize=' + groupsize + '&' + 
     'facilities=' + facilities; 
    $.ajax({ 
     type: "POST", 
     url: "process_timetableMon2.php", 
     data: dataString, 
     cache: false, 
     success: function (html) { 
      $('#mon').html(html); 
     } 
    }); 
}); 

process_timetableMon2.php

$array = explode(",", $_POST["facilities"]); 

for($i = 0; $i < count($array); $i++){ 
    echo $array[$i].'<br>'; 
} 

Answer 1

을 선택하기 때문에 드롭 다운이 동적으로 추가되면 위임 된 이벤트 핸들러가 필요합니다.

$(document).on('change blur', '.roomFac', function() { 
    //Your function here 
});