События мыши jQuery не работают после прокрутки списка

Question

У меня есть div с высотой 240px с переполнением, которое скрыто (css attr.). Когда пользователь нажимает кнопку, div прокручивает до другого содержимого, которое было скрыто ранее. Когда пользователь затем покидает этот div, я хочу, чтобы он вернулся к содержимому по умолчанию. Тем не менее, никакое событие мыши jQuery не работает ... Кто-нибудь знает почему? Вот мой код:

<div id="wrapper">
    <ul>     
        <li id="centerhover">
            <div class="welcomemsg">
                welcome info
            </div>

        <div class="share">
            <ul>
                <li>share 1</li>
                <li>share 2</li>
            </ul>
        </div> 
        </li>
        <li id="center">
            <div id="pull"></div>
        </li>   
    </ul>
</div>

Исходный контент, который отображается, находится в элементе списка с идентификатором "center". Когда пользователь нажимает div с идентификатором «pull», должно отображаться содержимое элемента списка с идентификатором «centerhover». Вот за этим стоит Javascript:

$(document).ready(function() {
        $("#pull").click(function() {
            return gotoPage(0);
        });

        $("centerhover").click(function() {
            return gotoPage(1);
        });

        function gotoPage(page) {
            var visible = Math.ceil($("#wrapper").innerHeight() / 240);
            var currentpage = 1;
            if (page == 1) {
                currentpage = 0;
            }
            var dir = page < 1 ? -1 : 1;
            var n = Math.abs(currentpage - page);
            var top = 240 * dir * visible * n;
            $("#wrapper").filter(':not(:animated)').animate({
                scrollTop : '+=' + top}, 500, function() {
                    if (page == 1) {
                        $("#wrapper").scrollTop(240);
                    } else {
                        $("#wrapper").scrollTop(-240);
                    }
            });
            return false;
        }

        var center = document.getElementById("center");
        var wrapper = document.getElementById("wrapper");
        wrapper.scrollTop = center.scrollHeight;
        setTimeout(function() {
            T.preload(0);
            T.poll(0);
        }, 1000);
    });

У кого-нибудь есть идея? Я пробовал мышку, щелчок и другие события ... Спасибо!

Answer 1

Прежде всего, просто чтобы указать на некоторые изменения в вашем скрипте, нигде я не вижу попытки привязать событие «mouseleave» к существующему скрипту, я помещу то, что вы хотели бы сделать, ниже модифицированного кода ниже (ПРИМЕЧАНИЕ для всех Flamers: это был 20-секундный проход для исправления некоторых из его синтаксических проблем, я буду рефакторинг, как позволит время)

$(document).ready(function() {
        $("#pull").click(function() {
            return gotoPage(0);
        });

        $("#centerhover").click(function() {
            return gotoPage(1);
        });

        function gotoPage(page) {
            var visible = Math.ceil($("#wrapper").innerHeight() / 240);
            var currentpage = 1;
            if (page == 1) {
                currentpage = 0;
            }
            var dir = page < 1 ? -1 : 1;
            var n = Math.abs(currentpage - page);
            var top = 240 * dir * visible * n;
            $("#wrapper").filter(':not(:animated)').animate({
                scrollTop : '+=' + parseInt(top)}, 500, function() {
                    if (page == 1) {
                        $("#wrapper").scrollTop(240);
                    } else {
                        $("#wrapper").scrollTop(-240);
                    }
            });
            return false;
        }

        var center = $("#center");
        var wrapper = $("#wrapper");
        wrapper.scrollTop(center.scrollTop());
        setTimeout(function() {
            T.preload(0);
            T.poll(0);
        }, 1000);
    });

Чтобы добавить привязку к оставляемому элементу оболочки:

$("#wrapper").bind("mouseleave", function(){
    $(this).scrollTop(0);
});