자바 스크립트 변경 클래스가 이벤트를 수행하지 않습니다.

Question

테이블의 아약스로드를 작성하려고합니다. 나는 2 개의 단추 "자유로운 차", "예약"가있다. "Free Cars"를 클릭하면 데이터베이스에서 모든 정보가로드되고 tr을 클릭하면 URL로 리디렉션됩니다.

$('.cars_table').on('click', 'tr', function() { 
     var values = $(this).find('td').map(function() { 
      return $(this).text(); 
     }); 
     var startdate = $('input[name$="startdate"]').val(); 
     var starttime = $('input[name$="starttime"]').val(); 
     var enddate = $('input[name$="enddate"]').val(); 
     var endtime = $('input[name$="endtime"]').val(); 
     window.location.href = 'rental/create/' + values[0] + '~' + startdate + ' ' + starttime + '~' + enddate + ' ' + endtime + ''; 
    }); 

그런 다음 "예약"의 클릭에 나는 TBODY의 클래스 변경 :

$('#cars_table').removeClass('cars_table').addClass('res_made'); 

을하지만

$('.res_made').on('click', 'tr', function() { 
     var values = $(this).find('td').map(function() { 
      return $(this).text(); 
     }); 
     var startdate = $('input[name$="startdate"]').val(); 
     var starttime = $('input[name$="starttime"]').val(); 
     var enddate = $('input[name$="enddate"]').val(); 
     var endtime = $('input[name$="endtime"]').val(); 
     window.location.href = 'reservations/create/' + values[0] + '~' + startdate + ' ' + starttime + '~' + enddate + ' ' + endtime + ''; 
    }); 

는 대신 첫 번째 스크립트를 수행하는 스크립트를 수행하지 않습니다 예약 행을 클릭하면 .cars_table 리디렉션 URL로 이동합니다. inspect 요소를 사용하면 클래스가 변경되었음을 나타내지 만 해당 클래스에 대한 스크립트를 수행하지 않습니다. 무슨 일 이니?

Answer 1

이벤트 바인딩은 DOM 요소 자체에서 발생합니다. 이 클래스의 요소가 있기 전에 모든 .res_made 요소에 이벤트를 바인딩하려고하면 이벤트가 바인딩되지 않습니다.

문제를 해결하려면 이벤트를 한 번 바인드하고 현재 어떤 클래스가 설정되어 있는지 핸들러에서 확인할 수 있습니다.

Answer 2

click 이벤트를 동적으로 바인딩해야합니다. 테이블의 클래스가 동적으로 변경 될 수 있기 때문입니다. 따라서 귀하의 경우에 작동하게하려면 다음에 자바 스크립트를 변경해야합니다 :

$(document).on('click', '.cars_table tr', function() { 
     var values = $(this).find('td').map(function() { 
      return $(this).text(); 
     }); 
     var startdate = $('input[name$="startdate"]').val(); 
     var starttime = $('input[name$="starttime"]').val(); 
     var enddate = $('input[name$="enddate"]').val(); 
     var endtime = $('input[name$="endtime"]').val(); 
     window.location.href = 'rental/create/' + values[0] + '~' + startdate + ' ' + starttime + '~' + enddate + ' ' + endtime + ''; 
    }); 

$(document).on('click', '.res_made tr', function() { 
     var values = $(this).find('td').map(function() { 
      return $(this).text(); 
     }); 
     var startdate = $('input[name$="startdate"]').val(); 
     var starttime = $('input[name$="starttime"]').val(); 
     var enddate = $('input[name$="enddate"]').val(); 
     var endtime = $('input[name$="endtime"]').val(); 
     window.location.href = 'reservations/create/' + values[0] + '~' + startdate + ' ' + starttime + '~' + enddate + ' ' + endtime + ''; 
    }); 

는 예를 들어이 FIDDLE를 참조하십시오. 물론, 대안으로, 이벤트를 한 번 바인드하고 Martin Denk이 제안한 것처럼 이벤트 핸들러에서 테이블 클래스를 확인할 수도 있습니다.