如何使用jquery解除綁定mouseleave點擊使用

Question

我有一個div，當你mouseenter預覽正在顯示的圖像時 - 當你使用鼠標時它再次隱藏它。

我想要實現的是當你點擊它動畫和顯示的div時，但是我想解除'mouseleave'功能，以便圖像停留在不工作的屏幕上 - mouseleave仍在踢...你能幫忙嗎？

這裏是我的代碼

$('.attachment').on({ 
    mouseenter: function (e) { 
     tileID = (this.parentNode.id).substring(13); 
     $('#imageContainer-' + tileID).css('visibility', 'visible'); 
     $('#imageContainer-' + tileID).css('overflow-y', 'hidden'); 
     $('#imageContainer-' + tileID).stop().animate({ 
      height: 40 
     }, { 
      duration: 300, 
      easing: animationEasing, 
      queue: false 
     }); 

    }, 
    mouseleave: function (e) { 
     $('#imageContainer-' + tileID).stop().animate({ 
      height: 0 
     }, { 
      duration: 300, 
      easing: animationEasing, 
      queue: false, 
      complete: function() { 
       $('#imageContainer-' + tileID).css('visibility', 'collapse'); 
      } 
     }); 

    }, 
    click: function() { 

     $('#attachmentLink-' + tileID).unbind('mouseleave'); 

     $('#imageContainer-' + tileID).stop().animate({ 
      height: 610 
     }, { 
      duration: 300, 
      easing: animationEasing, 
      queue: false, 
      complete: function() { 
       $('#imageContainer-' + tileID).css('overflow-y', 'auto'); 
      } 
     }); 
    } 
}); 

HTML代碼以供參考：

<div id="timelineContainer"> 

     <div id="timelineTopHider"></div> 
     <div id="timelineBottomHider"></div> 

     <ul class="timeline"> 

      <li id="timelineLI-1"> 

       <div class="timelineIcon letter"></div> 

       <div class="dateContainer"> 

        <p> 
         12th July 2013<br> 
         17:13 
        </p> 

       </div> 

       <div class="timelineTile" id="timelineTile-1"> 

        <a href="javascript:animateTile('1');" class="fillDiv"></a> 

        <div class="tileTitleContainer" id="tileTitleContainer-1"> 
         <span title="This is a really long title to test the application of text ellipsis and should concatenate the string">Test Title</span> 
        </div> 

        <div class="details" id="details-1"> 
         <table> 
          <tr> 
           <td>Name:</td> 
           <td>Full Name</td> 
          </tr> 
          <tr> 
           <td>Type:</td> 
           <td>Credit</td> 
          </tr> 
         </table> 

        </div> 

        <div class="arrow" id="arrow-1"></div> 

        <div class="attachment" id="attachmentLink-1"></div> 



        <div class="slideUpInfo" id="slideUpInfo-1"> 

         <p> 
          Name<br> 
          Info<br> 
          12th July 2013, 17:13 
         </p> 

        </div> 

        <div class="iconContainer hidden"> 
         <a href="javascript:toggleImageContainer(1);" id="iconContainerLink-1"> 
          <img src="images/attachment.png" /></a> 
        </div> 

        <div class="imageContainer hidden" id="imageContainer-1"> 

         <img src="images/documents/1.png" /> 

        </div> 

       </div> 

      </li> 

      </ul> 

     </div> 

Answer 1

修好了!!!

道歉 - 我正在解除與實際圖像中的div而不是使用mouseenter和mouseleave觸發的div。

我已經修改我的代碼，所以它現在正在工作

Answer 2

如下試試這個：

$("#id").click(function(){ 
    $("#id").unbind("mouseleave"); 
    }); 

Answer 3

您需要使用off：

$("#id").click(function(){ 
    $("#id").off("mouseleave"); 
}); 

見http://api.jquery.com/off/

Answer 4

使用unbind，添加以下代碼click處理程序，並檢查

$(this).unbind('mouseleave'); 

Answer 5

你不是真的要取消綁定你想要做的是使的mouseenter和鼠標離開事件有條件的，即給什麼事件在.attachment元素般的地位有些屬性=「點擊」時，已被點擊它看到例如：

$('.attachment').on({ 
     mouseenter: function (e) { 
      if($('.attchment').attr('status') != 'clicked'){ 
       tileID = (this.parentNode.id).substring(13); 
       $('#imageContainer-' + tileID).css('visibility', 'visible'); 
       $('#imageContainer-' + tileID).css('overflow-y', 'hidden'); 
       $('#imageContainer-' + tileID).stop().animate({ 
        height: 40 
       }, { 
        duration: 300, 
        easing: animationEasing, 
        queue: false 
       }); 
      } 
     }, 
     mouseleave: function (e) { 
      if($('.attchment').attr('status') != 'clicked'){ 
       $('#imageContainer-' + tileID).stop().animate({ 
        height: 0 
       }, { 
        duration: 300, 
        easing: animationEasing, 
        queue: false, 
        complete: function() { 
         $('#imageContainer-' + tileID).css('visibility', 'collapse'); 
        } 
       }); 
      } 
     }, 
     click: function() { 

      console.log('clicked ' + tileID); 
      $('.attchment').attr('status','clicked'); 

      $('#imageContainer-' + tileID).unbind('mouseleave'); 

      $('#imageContainer-' + tileID).stop().animate({ 
       height: 610 
      }, { 
       duration: 300, 
       easing: animationEasing, 
       queue: false, 
       complete: function() { 
        $('#imageContainer-' + tileID).css('overflow-y', 'auto'); 
       } 
      }); 

     } 
    }); 

菊如果不再處於點擊模式，請確保您更改/刪除狀態。