如何使用Jquery控制修改觸發器

Question

當我將鼠標移動到頁面上時，可以單擊頁面的一部分。如果本節的課程是「已完成」的，我希望它是灰色且不可點擊的。我怎麼做？

我有一些代碼如下：

$(document).ready(function() { 
    $session_rows = $(".coaching_page .user_session_info .session_info tr[session_id]"); 

    $session_rows.bind("mouseenter mouseleave", function() { 
     $(this).toggleClass("highlighted"); 
    }); 

    $(".created_column", $session_rows).add(".session_info_column", $session_rows).click(function() { 
     $(window).attr("location", "<?php echo $progress_url ?>/session/" + $(this).parent().attr("session_id")); 
    }); 

    $session_rows.find(".trash_column span.ui-icon-trash").bind("mouseenter mouseleave", function() { 
     $(this).toggleClass("highlighted"); 
    }).click(function() { 
     if (confirm("Are you sure you want to delete this Case?")) { 
      $(window).attr("location", "<?php echo $remove_url ?>/session/" + $(this).parent().parent().attr("session_id")); 
     } 
    }); 
}); 

這是HTML部分：

<table class="session_info"> 
    <thead> 
     <tr> 
      <td class="created_column">Created Date</td> 
      <td class="session_info_column" colspan="2">Case Info</td> 
     </tr> 
    </thead> 
    <tbody> 
     <?php foreach($sessions as $session) : ?> 
     <tr session_id="<?php echo $session->getId() ?>" class="completed"> 
      <td class="created_column"><?php echo $session->getDateTimeObject('created_at')->format('m/d/Y') ?></td> 
      <td class="session_info_column"> 
       <table> 
        <tr> 
         <td class="info_label">Coach:</td> 
         <td><?php echo $session->getCoachUser()->getFullName() ?></td> 
        </tr> 
        <tr> 
         <td class="info_label"># Contacts:</td> 
         <td><?php echo $session->getCoachingReports()->count() ?></td> 
        </tr> 
        <tr> 
         <td class="info_label">Last Updated:</td> 
         <?php $edit = $session->getMostRecentReportEdit() ?> 
         <td><?php echo $edit ? $edit->getDateTimeObject('created_at')->format('m/d/Y') : '[No Edits Yet]' ?></td> 
        </tr> 
        <tr> 
         <td class="info_label">Total Minutes:</td> 
         <td><?php echo $session->calculateTotalMinutes() ?></td> 
        </tr> 
       </table> 
      </td> 
      <?php if($sf_user->hasCredential(Attribute::COACHING_EDIT_ACCESS)) : ?> 
      <td class="trash_column"><span class="ui-icon ui-icon-trash">Remove</span></td> 
      <?php endif ?> 
     </tr> 
     <?php endforeach ?> 
    </tbody> 
</table> 

Answer 1

這可能做的伎倆：如您綁定的onlad

$('.completed').unbind('click').css('background-color','#999'); 

Answer 2

，並你灰色/在飛行中完成，只是排除.completed在綁定選擇器不會做。

您有兩個選擇：relpace .bind（）與.live（）或.delegate，並排除選擇器中的.completed類，或排除在綁定中完成。

$session_rows.bind("mouseenter mouseleave", function() { 
     $(this).not('.completed').toggleClass("highlighted"); 
    }); 

$(".created_column", $session_rows).not('.completed').add(".session_info_column", $session_rows).click(function() { 
    $(window).attr("location", "<?php echo $progress_url ?>/session/" + $(this).parent().attr("session_id")); 
}); 

$session_rows.find(".trash_column span.ui-icon-trash").not('.completed').bind("mouseenter mouseleave", function() { 
    $(this).toggleClass("highlighted"); 
}).click(function() { 
    if(confirm("Are you sure you want to delete this Case?")) { 
     $(window).attr("location", "<?php echo $remove_url ?>/session/" + $(this).parent().parent().attr("session_id")); 
    } 
}); 

編輯：或使用艾倫劉的解決方案，這是我沒有想到的:)

EDIT2：你可以簡單地使用選擇

$session_rows = $(/*.coaching_page .user_session_info*/ ".session_info tr[session_id]").not('.completed'); 

檢查this fiddle