0

jqueryのほろ酔いツールチップを使用して追加情報を表示しています。私は自分のウェブサイトをレスポンシブにしたので、サイズ変更イベントリスナーを追加し、ページのサイズに応じて多かれ少なかれ要素が表示されるようにしました。したがって、ほろ酔いツールチップを再適用する必要があります。たとえば、私は今、まだほろ酔いを持っていなかった新しい要素を持っているかもしれません.

残念ながら、再適用するたびに、既存のtipsysを置き換えずに、別のtipsysを追加したようです。

効果についてはjsfiddleを見てください。HTML 結果ペインのサイズを変更すると、ツールチップが表示されたときに JavaScript コンソールに複数のコールバックが表示されます。

http://jsfiddle.net/7mbbcmvz/1/

HTML コード:

<body>
    <a href="xy">xxx</a>
</body>

Javascript コード:

var i = 0;

function addTipsy(event) {
    $('a').tipsy({
        title: function() {
            i = i + 1;
            console.log('mouseenter ' + i);
            return 'test';
        }
    });
};

addTipsy();

window.addEventListener('resize', addTipsy);
4

1 に答える 1

0

バインドmouseenterを解除しmouseleave、ほろ酔いハンドラーを再適用する前に動作しているようです: 

var i=0;

function addTipsy(event) {
    $("a").unbind('mouseenter mouseleave');
    $('a').tipsy({
       title: function() {
            i = i + 1;
            console.log('mouseenter ' + i);
            return 'test';
        }
    });
};

addTipsy();

window.addEventListener('resize', addTipsy);

別の方法は、クラスを追加することによって既に酔っぱらいハンドラーを持っている要素を記憶し、そのクラスを持たない要素にのみほろ酔いハンドラーを追加することです。

function addTipsy(event) {
    $('a').not(".tipsyApplied").addClass("tipsyApplied").tipsy({
        title: function() {
            i = i + 1;
            console.log('mouseenter ' + i);
            return 'test';
        }
    });
};
于 2014-11-13T16:58:07.937 に答える