JQuery UI選項卡 - 動態添加和刪除鼠標懸停事件

Question

我想在用戶單擊複選框時向用戶界面選項卡添加一個鼠標懸停事件，但我很難動態添加和刪除事件。這是我到目前爲止。

<script type="text/javascript"> 

$(function() { 

    // add mouseover event when user clicks on checlkbox called chkbEnableMouseOver 
    $("#chkbEnableMouseOver").change(function() { 
    if (($("#chkbEnableMouseOver").is(":checked"))){ 
    $('#tabs').tabs.live("click",function(){ }); 
    } 
    else{  
    $('#tabs').tabs.live("click",function(){ event: 'mouseover'; }); 
    } 
    }); 

// UI tab strip - no default mouseover event 
$("#tabs").tabs({ }); 
// UI tab strip - WITH default mouseover event 
//$("#tabs").tabs({ event: 'mouseover' }); 



}); 
</script> 

<input TYPE="checkbox" id="chkbEnableMouseOver" >enable mouseover on tabs 


<div id="tabs"> 
// tabs go here 
</div> 

Answer 1

試試這個。當選中該選項框時，它將爲選項卡條中的所有列表元素添加一個mouseover處理程序，並在未選中時將其刪除。

$("#chkbEnableMouseOver").change(function() { 
    if (($("#chkbEnableMouseOver").is(":checked"))){ 
    $('#tabs > ul > li').bind('mouseover', function() { 
     ... do something on mouseover 
    }); 
    } 
    else{  
    $('#tabs > ul > li').unbind('mouseover'); 
    } 
});