jQueryのダイアログをポップアップするとページ先頭に戻ってしまう
ログ表示画面でログのひとつをクリックすると、その詳細をダイアログで表示するようなUIを作った。画面をスクロールして下の方に表示してるログをクリックすると、ダイアログは表示されるんだけど、ページの先頭までスクロール位置が移動してしまって、ダイアログがスクロールアウトして見えなくなってしまうという問題に遭遇。
ぐぐってみたら、同じ問題で困っている人がいた。
クリックイベントを拾ったところで false を返してやればいいらしい。
Stackoverflowのサイトで出てたコードがこれ。
$('a.closeButton').click( function() { $('#dialog').dialog('open'); return false; }); <a class='closeButton'>Close</a>
ログを表示してるテーブルの各要素に対してこの方法で実装してやることで、ダイアログを表示しても勝手にスクロールすることはなくなった。
for (var i = 0; i < json.length; i++) { var log = json[i]; var tr = $('<tr>'); tr.append($('<td>').text(log.time)); tr.append($('<td>').text(log.text)); tr.click(function() { showDialog($(this)); return false; }); $('#log-table').append(tr); }