如何使用jquery取消绑定mouseleave点击

我有一个 div，当您鼠标输入时，它会预览正在显示的图像 - 当您鼠标离开时，它会再次隐藏它。

我想要实现的是，当您单击该 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>

你需要使用off:

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

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