javascript - JQuery UI 选项卡 - 动态添加和删除鼠标悬停事件

Question

我想在用户单击复选框时向 UI 选项卡条添加鼠标悬停事件，但我无法动态添加和删除事件。这是我到目前为止所拥有的。

<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

试试这个。当选中该框时，它将向选项卡条中的所有列表元素添加一个鼠标悬停处理程序，并在取消选中该框时将其删除。

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