JQuery UI Tabs - dynamically adding and removing mouseover event

Question

I would like to add a mouseover event to a UI tab strip when user clicks on a checkbox, but I am trouble dynamically adding and removing events. Here is what I have so far.

<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

Try this. It will add a mouseover handler to all of the list elements in the tab strip when the box is checked and remove it when it is unchecked.

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