動的にHTMLコンテンツを吹き出し表示したい

質問

リンクをマウスオーバーしたとき、リンクのhrefの値を取得して吹き出ししたいHTMLのidを割り出します。そしてhtml()メ
ソッドでasideタグ以下の要素を取得し、それをtooltip用プラグインであるballoonのcontents属性にセットして動的に表示
するHTMLを変えたいと思っています。（アイデア１）では一時変数contentにmouseoverイベント時に取得したhtmlを格
納し、それをbaloonで表示したいと思いました。しかしこのメソッドチェーンでは動いてくれません。（アイデア２）では
balloon実行時に無名関数を利用しquotelinkクラスからhrefを取得したいと思ったのですが、$(this)ではquotlinkクラスオ
ブジェクトが取得できません。

みなさんのお知恵をお貸しください。よろしくお願いします。

■画面に吹き出し表示したい箇所のHTML

<aside id="q56" style="padding-top: 40px; margin-top: -40px;">
<div id="reply" >
<div>
<span class="filecaption">1390245737775.jpg (75KB, 661x720)</span>
<a id="reply_image" href="/uploads/fullsize/1390245737775.jpg" target="_blank">
<img src="/uploads/thumbs/1390245737775.jpg" alt=""></a>
<blockquote class="postMessage">
たたたたああああああああああああああ<br>
</blockquote>
</div>
</div>
</aside>

■マウスオーバーする箇所
<a href="/threads/international/22#q56" id="c56" class="quotelink">56</a>

■javascript:
（アイデア１）
var content;
$('.quotelink')
.on("mouseover", function () {
var link = $(this).attr("href");
var num = String(link).split("#");alert('num = ' + num);
content = $("aside#" + num[1]).html();
content = content.replace(/\r\n/g, "");//IE
content = content.replace(/\n/g, "");//Firefox
}).balloon({
showDuration: 0,
hideDuration: 0,
minLifetime: 0,
tipSize: 0,
offsetY: 50,
contents: content,
css: {
opacity: "1.0"
}
})
});

（アイデア２）
var content;
$('.quotelink').balloon({
showDuration: 0,
hideDuration: 0,
minLifetime: 0,
tipSize: 0,
offsetY: 50,
contents: function() {
var link = $(this).attr("href");
var num = String(link).split("#");alert('num = ' + num);
content = $("aside#" + num[1]).html();
content = content.replace(/\r\n/g, "");//IE
content = content.replace(/\n/g, "");//Firefox
alert('content = ' + content);
return content;
},
css: {
opacity: "1.0"
}
})
});

回答No.1

shockatz · ベストアンサー

$('.quotelink').ballon() の瞬間に別のイベントハンドラを割り込ませcontentsを取得投入するｗｗｗｗ
何という瞬間芸

aタグなんか、javascriptでballon定義した瞬間にどっか失せてますよ。
jquery.baloon.js のドキュメントを読むと、自力でイベント処理して汎用メソッド呼べと書いてある。

$('.quotelink').on("mouseover", function () {
var link = $(this).attr("href");
content = $("aside#" + String(link).split("#")[1]).html();
content = content.replace(/\r\n/g, "");//IE
content = content.replace(/\n/g, "");//Firefox
$(this).showBaloon({ contents:content });
});

お礼

shockatzさん　ありがとうございました。　補足で表示できない旨をお伝えしましたが、showBallonメソッドでヒントを頂き、無事実装に成功いたしました。
ありがとうございました。感謝いたします。

補足

shockatz さん　ご返答ありがとうございます。

早速、教えていただいたロジックを試したところ最初にマウスオーバーしたときは画面表示されずに２回目以降にマウスオーバーしたら画面に表示されました。デバッグで試したら（cotent の内容を取得した後にalertで内容を表示）contentの内容が一回目にマウスオーバーしたときは取得できず、２回目、３回目とマウスオーバーすると２回、３回と乗算的に画面表示(alertでの表示)されました。
最初にマウスオーバーしたときにポップアップ表示するにはどうすればよいのでしょうか？