title: How to unbind mouseleave on click using jquery
body: <p>I have a div which when you mouseenter it previews an image being shown - when you mouseleave it hides it again.</p>
  
  <p>What I'm trying to achieve is when you click that div it animates and shows, but I'd like to then unbind the 'mouseleave' functionality so that the image stays on screen which isn't working - the mouseleave is still kicking in.... can you help?</p>
  
  <p>Here's my code</p>
  
  <pre><code>$('.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');
              }
          });
      }
  });
  </code></pre>
  
  <p>HTML Code for reference:</p>
  
  <pre><code> &lt;div id="timelineContainer"&gt;
  
          &lt;div id="timelineTopHider"&gt;&lt;/div&gt;
          &lt;div id="timelineBottomHider"&gt;&lt;/div&gt;
  
          &lt;ul class="timeline"&gt;
  
              &lt;li id="timelineLI-1"&gt;
  
                  &lt;div class="timelineIcon letter"&gt;&lt;/div&gt;
  
                  &lt;div class="dateContainer"&gt;
  
                      &lt;p&gt;
                          12th July 2013&lt;br&gt;
                          17:13
                      &lt;/p&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="timelineTile" id="timelineTile-1"&gt;
  
                      &lt;a href="javascript:animateTile('1');" class="fillDiv"&gt;&lt;/a&gt;
  
                      &lt;div class="tileTitleContainer" id="tileTitleContainer-1"&gt;
                          &lt;span title="This is a really long title to test the application of text ellipsis and should concatenate the string"&gt;Test Title&lt;/span&gt;
                      &lt;/div&gt;
  
                      &lt;div class="details" id="details-1"&gt;
                          &lt;table&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;Name:&lt;/td&gt;
                                  &lt;td&gt;Full Name&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;Type:&lt;/td&gt;
                                  &lt;td&gt;Credit&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
  
                      &lt;/div&gt;
  
                      &lt;div class="arrow" id="arrow-1"&gt;&lt;/div&gt;
  
                      &lt;div class="attachment" id="attachmentLink-1"&gt;&lt;/div&gt;
  
  
  
                      &lt;div class="slideUpInfo" id="slideUpInfo-1"&gt;
  
                          &lt;p&gt;
                              Name&lt;br&gt;
                              Info&lt;br&gt;
                              12th July 2013, 17:13
                          &lt;/p&gt;
  
                      &lt;/div&gt;
  
                      &lt;div class="iconContainer hidden"&gt;
                          &lt;a href="javascript:toggleImageContainer(1);" id="iconContainerLink-1"&gt;
                              &lt;img src="images/attachment.png" /&gt;&lt;/a&gt;
                      &lt;/div&gt;
  
                      &lt;div class="imageContainer hidden" id="imageContainer-1"&gt;
  
                          &lt;img src="images/documents/1.png" /&gt;
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;/li&gt;
  
              &lt;/ul&gt;
  
          &lt;/div&gt;
  </code></pre>