0

ページの1つで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（現在は非推奨）を使用している場合は、またはを使用できます.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 に答える