How do you rebind jQueryUI tooltip?

Question

I am using jQueryUI tooltip on one of my page.

        $('.sourceItem').hover(function () {
            $(this).find('.tooltip').show();
            $(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });
        });

        $('.sourceItem').mouseleave(function () {
            $('.tooltip').hide();
        });

here my html code:

    <div id="sourceBoxInner">
                <div class="sourceItem" id="9003">
                    <img src="/Pictures/Fruit/apple.png" alt="apple w/ skin, raw"/><br />
                    <a href="#" class="linkToolTip" title="apple w/ skin, raw">apple w/ skin, raw</a>
                    <div class="tooltip">
                        <div class="arrow">
                            ▲</div>
                        <div class="text">apple w/ skin, raw<br /> 09003<br /> </div>
                    </div>
                </div>
                <div class="sourceItem" id="9004">
                    <img src="/Pictures/Fruit/apple.png" alt="apple w/out skin, raw"/><br />
                    <a href="#" class="linkToolTip" title="apple w/out skin, raw">apple w/out skin, raw</a>
                    <div class="tooltip">
                        <div class="arrow">
                            ▲</div>
                        <div class="text">apple w/out skin, raw<br /> 09004<br /> </div>
                    </div>
                </div>
    </div>

So far, everything works, I can see the tooltip, when I hover on it.

Now, I make an ajax call to repopulate "sourceBoxInner" div. The tooltip stops working. I think I need to rebind it. so in the ajax OnSuccess method, I add following code again. but still does not work.

    function OnSuccess() {

        $('.sourceItem').hover(function () {
            $(this).find('.tooltip').show();
            $(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });
        });

        $('.sourceItem').mouseleave(function () {
            $('.tooltip').hide();
        });

    }

Updates:

I also tried following code, still not working.

    function OnSuccess() {


        $(".sourceItem").unbind("hover").hover(function () {

            $(this).find('.tooltip').show();
            $(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });

        });

    }

Answer 1

You can try this

$(document).on('mouseenter', '.sourceItem', function(){
    $(this).find('.tooltip').show();
    $(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });
}).on('mouseleave', '.sourceItem', function(){
    $('.tooltip').hide();
});

Answer 2

You can either rebind as you suggest, or use either .live() if you have an older version of jQuery ( now deprecated ), or .on(), which would be preferred.

$(document).on({
    hover: function () {
        $(this).find('.tooltip').show();
        $(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });
    },
    mouseleave: function () {
            $('.tooltip').hide();
    }
},'.sourceItem');

edit: had to fix my selector