javascript更改类不执行事件

我正在尝试做一个表的ajax负载。我有2个按钮“免费汽车”，“预订”。当点击“免费汽车”从数据库加载所有信息，并点击tr重定向到一个网址。javascript更改类不执行事件

$('.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重定向网址。使用inspect元素，它显示类已经改变，但是它不执行该类的脚本。发生什么事？

来源

2014-09-30 arual

事件绑定发生在DOM元素本身上。如果您尝试在所有.res_made元素之前绑定一个事件，然后有此类的任何元素，则不会绑定任何事件。

为了解决你的问题，你可以绑定你的事件一次，并检查处理程序里面的类当前设置。

来源

2014-09-30 08:12:07

您应该动态绑定click事件，因为表的类可以动态更改。因此，为了使这工作你的情况，你应该你的JavaScript更改为以下：

$(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所建议的。

来源

2014-09-30 08:13:21 ZiNNED

javascript更改类不执行事件

回答

相关问题