How to unbind mouseleave on click using jquery

Question

I have a div which when you mouseenter it previews an image being shown - when you mouseleave it hides it again.

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?

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

HTML Code for reference:

 <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

Fixed it!!!

Apologies - I was unbinding the div with the actual image in rather than the div which fires off mouseenter and mouseleave.

I've amended my code so it's now a working

Answer 2

You need to use off:

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

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

Answer 3

you dont really want to unbind the events what you want to do is make mouseenter and mouseleave events conditional, i.e. give the .attachment element some property like status="clicked" when it has been clicked see example:

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

        }
    });

just make sure you change/remove the status if its no longer in clicked mode.

Answer 4

Use unbind, Add below code in click handler and check

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

Answer 5

Try this as below:

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