Проблема JQuery с использованием функции .delegate (), проблема с привязкой функции к элементам ...

Question

Я новичок в jquery, и у меня возникла проблема с использованием .delegate () для привязки функции к элементам на моей странице.

Я не могу сделать это с помощью .bind (), потому что DOM на странице изменяется, когда я частично перезагружаю часть страницы.

Я смотрел на использование .live (), но кажется, что это не рекомендуется .delegate ().

Я задавался вопросом, сможет ли кто-нибудь помочь мне, где я могу пойти не так?

Я пытаюсь создать всплывающую подсказку, которую можно использовать по всему сайту. Я знаю, что уже есть библиотеки из инструментов jquery и т. Д., У которых есть эта функциональность, но я бы сам собрал простую версию.

Вот код.

$jQuery.fn.myToolTip = function () {
    var offTopSide = 0;
    var offLeftSide = -360;

    $(this).mouseover(function () {
        //left side of button
        var currentLeftPosition = $(this).position().left;
        //top side of button
        var currentTopPosition = $(this).position().top;
        var myToolTip = $(this).next();
        myToolTip.css("top", (currentTopPosition + offTopSide) + "px");
        myToolTip.css("left", (currentLeftPosition + offLeftSide) + "px");
        myToolTip.show();
    });

    $(this).mouseout(function () {
        $(this).next().hide();
    });
}

$(document).ready(function () {
    $(document).delegate('a', "mouseover mouseout", function () {
        $(this).myToolTip();

    });
});

Вот HTML ...

<a class="button" href="">Mouse over this link...</a>
<div class="tooltip" style="display: none;">
    <div class="tooltip-inner">
        tooltip1
    </div>
    <div class="clear">
    </div>
</div>

В настоящее время это работает ТОЛЬКО после наведения мыши и отключения ссылки ОДНАЖДЫ. При наведении мыши во второй раз всплывающая подсказка ..

Извиняюсь, если это что-то действительно очевидное.

Привет

S

Answer 1

Как я читаю, вы вызываете myToolTip(); для элемента на mouseover и mouseout, чтобы установить новые обратные вызовы событий mouseover & mouseout, чтобы во второй раз при наведении мышибудут вызываться новые обратные вызовы событий.

вы хотите сделать это:

$(document).delegate('a', "mouseover", function (){
    //left side of button
    var currentLeftPosition = $(this).position().left;
    //top side of button
    var currentTopPosition = $(this).position().top;
    var myToolTip = $(this).next();
    myToolTip.css("top", (currentTopPosition + offTopSide) + "px");
    myToolTip.css("left", (currentLeftPosition + offLeftSide) + "px");
    myToolTip.show();
});

и это:

$(document).delegate('a', "mouseout", function () {
    $(this).next().hide();
});