0

我在我的一个页面上使用 jQueryUI 工具提示。

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

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

这是我的html代码：

    <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">
                            ▲&lt;/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">
                            ▲&lt;/div>
                        <div class="text">apple w/out skin, raw<br /> 09004<br /> </div>
                    </div>
                </div>
    </div>

到目前为止，一切正常，当我将鼠标悬停在工具提示上时，我可以看到它。

现在，我进行 ajax 调用以重新填充“sourceBoxInner”div。工具提示停止工作。我想我需要重新绑定它。所以在 ajax OnSuccess 方法中，我再次添加以下代码。但仍然无法正常工作。

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

    }

更新：

我也尝试了以下代码，但仍然无法正常工作。

    function OnSuccess() {


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

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

        });

    }
4

2 回答 2

3

你可以试试这个

$(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();
});
于 2012-10-18T01:25:46.473 回答
0

您可以按照您的建议重新绑定，或者.live()如果您有旧版本的 jQuery（现已弃用），或者使用 jQuery .on()，这将是首选。

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

编辑：必须修复我的选择器

于 2012-10-18T01:26:04.847 回答