0

追加された要素でツールチップを機能させることができません。

フィドルはこちら: http://jsfiddle.net + jeffz2012/4xwM9/8/ (このリンクを機能させることはできません)

コードはここにあります：

//css:
//---------
.mrg {
    余白: 15px;
}
。手 {
    カーソル: ポインタ;
}
。ヘルプ {
    カーソル: ヘルプ;
}
.brd {
    パディング:7px;
    境界線: 実線 1px #ccc;
}



//html:
//---------
<div class="mrg tip brd help" title="私は通常のツールチップです">ここにマウスを合わせると、追加されていないツールチップが表示されます</div>
<div id="trig" class="mrg hand brd">ここをクリックして別の div を追加</div>
<div id="rec" class="mrg" title="ツールチップが追加されましたが、動作しません"></div>



//jquery
//---------
$('#trig').on('クリック', function() {
    $('#rec').append('<div class="help brd tip">これは追加された要素であり、ホバー時にツールチップを表示する必要があります</div>');
});

$( '.tip' ).tooltip({
    開く：関数（イベント、UI）{
        ui.tooltip.animate({
            上: ui.tooltip.position().top + 10
        }、 "速い" ）;
    }、
    位置： {
        my: "センター ボトム",
        at: "センタートップ+10",
        衝突：「フリップフィット」
    }

});
4

2 に答える 2

3

私があなたを正しければ、これが解決策です：

http://jsfiddle.net/4xwM9/9/

追加された div のツールチップを初期化する必要があります。

$('#trig').on('click', function() {
    var $addedTooltip = $('<div class="help brd tip">this is appended element and should show tooltip on hover</div>');

    $('#rec').append($addedTooltip);

    $addedTooltip.tooltip();    
});
于 2013-07-01T20:51:05.207 に答える
0

jQuery.tipsy.js ファイルに移動 live: falseを175 行目でtrueに変更

于 2013-09-30T12:52:08.127 に答える