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');
   }
 });

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

1 个答案: