无法过滤jQuery单击关闭类定义

Question

I have a table set up... here is the relevant HTML format...

<table class="booking table">
   <tbody class="time_period_rows">
      <tr class>
        <td> ... </td>
      </tr>
      <tr class="booked">
        <td> ... </td>
      </tr>
       .
       .
      <tr class="selected">
        <td> ... </td>
      </tr>

And the table goes on from there. Fundamentally I have table of appointment slots. The "booked" class means exactly that. The "selected" class is toggled on and off as a the time for a new booking is selected. I simply want to stop a click being recognised when they try and select one where the "booked" class exists. Here is my current jQuery code,

$('.time_period_rows tr:not(.booked)').click(function(){
    $('.selected').removeClass('selected');
    $(this).toggleClass('selected');
});

Pretty darn simple. But the filtering is not working. Right now I can select any row. Can anyone see why?

Many Thanks

Answer 1

您只需要取消绑定单击，因为<tr>已添加booked的课程：

$(this).unbind('click');

Answer 2

$('.time_period_rows tr').on('click', function(){
    if (!$(this).is('.booked')) {
        $('.selected').removeClass('selected');
        $(this).toggleClass('selected');
    }
});