// html
<div id="search_result">
<table>
<tr><td>hoge1</td></tr>
<tr><td>hoge2</td></tr>
<tr><td>hoge3</td></tr>
<!-- こんな感じでいっぱい行があるよ -->
</table>
</div>
// Javascript
$('#search_result').empty();
jQuery で大量のDOMオブジェクトを削除すると異常に時間がかかる。
650行ほどのデータを削除すると30秒とかかかるんですが・・。
jQuery は 1.3.2 を使用。
// Javascript
$('#search_result').remove();
empty() は子要素を削除するので遅いのかと思って remove() に変えてみる。
remove() は自分ごと削除。
それでも全然早くならない。
// Javascript
$('#search_result').html('');
削除が遅いなら html() で直接中身を書き換えてやろう。
やっぱり早くならない。
// Javascript
$('#search_result')[0].innerHTML = '';
ぬぬぬ、じゃあ DOMオブジェクト のinnerHTML を直接書き換えてやろう。
やったー!
一瞬で終わったよ!
$('#search_result') ここまでは jQuery なのに早くなるのか。
よくわからん。。。
この問題は jQuery1.4 では解決されてるみたいだすよ。
速度の比較 をみたら変わりすぎてて笑った。
$('#btn').click(function test() {
alert('a');
});
$('#btn').click(function test() {
alert('b');
});
$('#btn').click();
→実行結果
→ a を表示
→ b を表示
イベントに設定したコールバック関数って追加されていくのね。
勝手に上書きだと思ってた。
$('#btn').bind('click', function test() {
alert('a');
});
$('#btn').unbind('click');
$('#btn').bind('click', function test() {
alert('b');
});
$('#btn').click();
→実行結果
→ b を表示
bind() を使用してコールバック関数を設定すれば unbind() で削除できる。
使いたいイベントに対応してるなら bind() と unbind() より live() と die() が素敵かも。
jQuery 1.3 では live() は以下のイベントに非対応。
blur, focus, mouseenter, mouseleave, change, submit
×これじゃだめ
$(form).attr('enctype', 'multipart/form-data');
○真面目に書きなさいって事ね
<form name="formName" id="formId" method="post" enctype="multipart/form-data"></form>
共通機能を作ってたので一緒にやっちゃおうと思ったけど
真面目に書くに限るね。