Question

我在我的一个页面上使用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">
                            ▲</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>

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

现在，我进行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' });

        });

    }

Answer 1

你可以试试这个

$(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

您可以按照建议重新绑定，也可以使用.live()（如果您有旧版本的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');

修改：必须修复我的选择器

你如何重新绑定jQueryUI工具提示？

2 个答案: