>>597
じゃあ、おまえが何の話してるか言えよ。
わかってるんだろ？

それを言わないから、問題が起きたんだーっていっても
何の話だと思う？何の話かは言わねぇｗｗｗ。ってなってるから
誰もおまえの言うことを信じてないんだぞ

>>599
逆じゃね？

>>598
window.openしたら、openしたwindowを返すから、
そのwindowに書き込めばいい。

>>601
だから分からないならいいんじゃねって言ってるだろ
分からないことは責めてないから。
頓珍漢な絡み方をしてくることを責めている

よくwindow.openって書かれますが、
windowいらなくないですか？
何でwindow書くのですか？

参照していたものが失われる可能性がある
↓
ガベージコレクタが回収するから問題ない

なんだこれ

「参照先」に訂正するわ

>>604
openでは汎用過ぎて、なんのopenなのか
わからないから。

コードというのは意図をわかりやすくするのが重要で、
コンピュータにとって問題ないからって省略した方がいいとは限らないんだよ。

コードを読むのは人間なんだから。

MS-Windowsじゃなくてもwindowってつかえるの？

jQueryって要素の操作は得意だけど
nodeの操作はあんまりだね

また頓珍漢な反論が出てきそうなので釘をさしておこう

jQuery の .text() は textContent の代替であってテキストノード値の書き換えではない
http://api.jquery.com/text/

あんまりっていうか全然じゃね

nodeTypeを数字で判定すると、
その数字が何だったのか後から見た時に分からないです
nodeTypeを定数として持ってるオブジェクトはないんですか？

>>613
Node.ATTRIBUTE_NODE とか、DOM Interface オブジェクトを利用しては？
なかったら自前で作る

ああ、というか Node 使わなくても全てのノードで参照できるな

IE8- をサポートするなら自前で作る必要があるか

>>609
初学者なりに見てみたんだけど確かに注意すべき問題だけど
addEventListenerが結果を保持するところとinnerHTMLが持ってくるところが違うから起きる現象に見える
// addEventListenerで追加しないで onClickで仕込むと>>609のいう問題な動作は起きないところからそう見た

上書きか書き換えか、とか、壊れる、とかいうと予想外の期待されない動作みたいなニュアンスがあるけど
実際は「まー当然こうなるよね」というふうな動作に見えるのだけど、そうではないのかな？

>>617
確かにイベントが解除される問題は <strong id="Test" onclick="changeBackgroundColor(event);"> で回避できる
しかし、その場合も #Test の要素ノードをクロージャでキャッシュしていた場合は参照が切れる
重要なのは参照が切れてしまう事であってイベントの問題が回避できれば解決するわけではない
(他にも参照を利用したコードはあるだろう)

同様の問題は textContent にもある
テキストノードをキャッシュしていたら textContent で上書きすれば参照が切れる
Text#data で値を書き換えれば、参照は切れないので問題は発生しない
テキストノードの間に要素を挟んでテキストノードを分割するなら新しいテキストノードを作成すべきだが、既存のテキストノードを流用できるなら流用した上で値の書き換えにとどめたほうが良い

> 実際は「まー当然こうなるよね」というふうな動作に見えるのだけど、そうではないのかな？
「当然の事象」を理解した上で問題点の少ないコードを模索するのが良いプログラマだと思う

>>609
> innerHTML の本質は「上書き」であって「書き換え」ではない
> 書き換える必要のないDOMノードまで強制的に上書きするのが

は？ 当たり前じゃん。 当たり前じゃん。

欠点でも何でもねーよ。

HTMLの中身を入れ替えるんだから変わるに決まってるじゃん。

びっくりした。あまりにも馬鹿すぎて。

当たり前の事を分かって無い奴がどんだけいるんだろうな

単なる$.html()でイベントが消える・・・というか
入れ替えるhtmlにイベント書いてないから当たり前なんだが、
それが嫌なら、$.clone()使えばいいだけ。

http://js.studio-kingdom.com/jquery/manipulation/clone

[withDataAndEvents] boolean値で、マッチしている要素に付随している
イベントハンドラもコピーするかどうかを決定します。 jQuery1.4からは保持しているdataも同様にコピーの対象になります。

(初期値はfalseでしたが、jQuery1.5でtrueになり、jQuery1.5.1で再度falseにもどされました。)
[deepWithDataAndEvents] boolean値で、マッチしている要素の全ての子要素に対しても、
付随しているイベントハンドラとDataをコピーするかどうかを決定します。 この初期値は1つ目の引数と同じになります。

>>618
onClickの話は別に解決策を提示したわけではないよ
それで、あらためて>>539をみてなるほどと思いかけたけど、となると
消えたように見えるリスナーはどこにいっちゃったのか、消滅したわけじゃなさそう

それと、innerHTMLとかinnerTextって書くの楽だし
jQueryをはじめいろんなところで使われまくってるから
使わないじゃなくて、問題点を理解して使っていくうえで賢いやり方とかあるかな？
今って参照を保持したり動的にイベント制御したりがどのくらい頻繁に出てくるのか知らないけど

> 「当然の事象」を理解した上で～～
いや、言葉の使い方の話

innerHTMLもhtmlも、「HTML文字列」から
新しいHTMLを生成するもので、イベントハンドラが
HTML文字列に書いてないから、イベントハンドラがないの当たり前だろ。

そういう風に動的に追加される要素にイベントハンドラを付けたいなら
個々に追加する（面倒な方法）か、親要素にイベントハンドラ設定するのが常識。
たとえば $(document).on('click', セレクタ, function() {・・・}) みたいに。

> 消えたように見えるリスナーはどこにいっちゃったのか、消滅したわけじゃなさそう
だから消滅するって。ガベージコレクションって書いただろ。
どこからも参照されなくなれば消える。

innerHTMLやjQueryのhtml()には欠点があるのではなく
注意点があるだけの話。いやはや馬鹿だった馬鹿だったｗ

>>621
そのまま使えばいいのになぜ clone() するんだよ
>>618を全く読んでないな

当たり前の事実を目にして、改善するか、何もしないか、の違いだな

やる必要がないことをやらないのは大事だ
やる必要をなくすことも大事だ

まる一日使って613でようやく飲み込むとか本当に馬鹿だな

>>608
別にwindowってWindows固有の用語じゃないしな…
例えばLinuxやUnixの世界にはX Window Systemってのがあるし

jsってgcあるんですね

>>627
理解した上でその判断なら君は本物の馬鹿だ

今年工業高校卒業予定なんですが愛知でインターンシップみたいなのって無いですか

>>627
参照を切らなければ、参照を保持している事を記憶する必要がない
やる必要をなくすことは大切だな

>>634
> addEventListener に Listener は登録されているので消えているわけではないが、documentとの参照は切れる
> もう一度、document にノードを appendChild すればイベントが発火するはず

ノードとそのノードのイベントハンドラが消えるタイミングを勘違いしてるよ。
まずイベントハンドラが消えるタイミングはノードが消えた時。

ここまではいいよね？

じゃあノードが消えるのはいつかというと、documentから消した時じゃない。
documentから消して、さらにJavaScripのどこからも参照がない時。

DOMからremoveChildしたりinnerHTMLで消して、かつ
JavaScriptのどこからも参照されなくなった時にイベントハンドラは削除される。

JavaScriptのどこからも参照がなくなった時だから、
これをJavaScript内で検知するのは不可能。


> innerHTML を使うなら問題を回避できないので、
だからなんの問題？

ということで、>>634をjQueryとhtml()メソッドを使って、
イベントが解除されないという証拠です。

http://jsfiddle.net/Pc87X/2/

テキスト以外の部分も書き換える可能性があるから
全く同じじゃないが、今の本題はhtml()でメソッドが
解除されるかどうかだから。

ついでにここにもコピペしとく

(function () {
　function changeBackgroundColor () {
　　this.style.backgroundColor = this.style.backgroundColor ? '' : 'orange';
　}

　function runInnerHtml () {
　　var str = $('body').html();
　　str = str.replace('テスト', 'JavaScript');
　　$('body').html(str);
　}

　$('#Test').on('click', changeBackgroundColor);
　$('#ClickMe').on('click', runInnerHtml);
}());

>>636はhtml()使ってもイベントハンドラが消えないという証拠として書いたもので
しかもなるべくオリジナルに近い形にしたので俺的には気に入らないコードだった。

普通に書いたらこうかな。ってことでついでにちゃんと書いたよ。

http://jsfiddle.net/Pc87X/4/

短いので、ここにもコピペしておく。

$(function () {
　$('#Test').on('click', function () {
　　this.style.backgroundColor = this.style.backgroundColor ? '' : 'orange';
　});

　$('#ClickMe').on('click', function () {
　　$('*').contents().filter(function() {
　　　return this.nodeType === 3;
　　}).each(function() {
　　　this.textContent = this.textContent.replace('テスト', 'JavaScript');
　　});
　});
});

あ、今気づいたが、getElementById('SampleText')で
対象を絞り込んでたのねｗ

まあ適当に補完しといてくれ。

いやー、悪い悪い >>636は自分で書いててて
なんで動くんだって思ったんだｗ
間違えてたな。うん。動かない。

訂正した奴はこっち。もちろんhtml()は使ってるから安心してな。
やってることは>>623で説明したとおり
http://jsfiddle.net/Pc87X/5/

(function () {
　function changeBackgroundColor () {
　　this.style.backgroundColor = this.style.backgroundColor ? '' : 'orange';
　}

　function runInnerHtml () {
　　var str = $('#SampleText').html();
　　str = str.replace('テスト', 'JavaScript');
　　$('#SampleText').html(str);
　}

　$(document).on('click', '#Test', changeBackgroundColor);
　$(document).on('click', '#ClickMe', runInnerHtml);
}());

>>639
html()でイベントが消えないのは分かったが
そのコードだと $('#SampleText')[0].innerHTML = str; でも動いちゃうけどな？

対象のノードの子にあたるノードに対して、スクリプト側で動的にイベントハンドラを設定したり参照を持ったりしていると
innerHTMLを使用したときに、子ノードに設定したイベントハンドラや持ってる参照が消えてしまいますよ
二行でええやん

>>641
っていうか、少し考えればわかることなんだが。

中身を入れ替えてるわけだから、当然新しいものになるわけで、
古い方に割り当てたイベントハンドラは、新しいものにはついてない。
これは別にinnerHTMLのバグでも問題でも何でもなく常識的な動き。

だから新しくイベントハンドラを割り当てるか、親要素にイベントハンドラを
割り当てるかすればいいだけ。

これはinnerHTMLを使うときは、これを見逃さないでねってだけで
innerHTMLを使っちゃいけない理由でもなんでもないよ。

っていうのは、最初っからみんな言ってる話なんだよ。
使っちゃいけない理由はないって。

>>640
何か問題あんの？ html()は内部でinnerHTMLを
使ってるんだからあたりまえだと思うが。

ボックスからスクロールバーのサイズを引いたwidthを取得したいのですが
どうやればいいでしょうか？

>>634
> documentから消して、さらにJavaScripのどこからも参照がない時。
この点では私とあなたで意見の相違はないと思うのだが…

>>639
バブリングで上位ノード監視の手法は知っているし、後述する予定だったが、参照が切れることに変わりはないはず
ようはイベントがはがれる事だけが問題ではないのだが
帰宅中なので詳細は後程

> 参照が切れることに変わりはないはず
参照が切れる切れるうざくね？
なんでそんなものに執着してるのか。

中身を新しいものに入れ替えてるんだから
別物になっただけだよ。全然難しい話じゃない。

そういう動きになるってだけでそれで問題ないなら、なにも問題ないだろ。
少し盲点になるかもねーってだけの話でしか無い。

古いものを無くしたいのなら（だからinnerHTML使ってるわけで）
むしろ消えてなくなった方がいい場合も多い。
たとえば、<select>要素の<option>をinnerHTMLで入れ替えるのに
ほとんどの場合なんの問題もねーよな？

あんたは、中身を少し書き換えることしか頭にないから参照参照とうざいけど
中身を完全に入れ替えて全く違うものにした時、前のデータが残っているほうが不自然だろ。

へんなやつと絡むから話がこじれるんだよ・・
分からなきゃ分からないでいい、で終わる話
何を言っても納得しないし意味ないよ

これ単なる初心者の質問でしかないから。
すごく丁寧に解説すると

【質問】
element.innerHTML = element.innerHTML.replace(テキスト修正);
って書いたら、element.innerHTMLの中に設定していた
イベントハンドラが動かなくなりました。どうしてですか？

【回答】
element.innerHTML の中身を新しいHTMLに入れ替えたのだから
当然中身は新しくHTML（DOM）になります。

たとえば
element.innerHTML の中に '<a href="hoge">link</a>'; があって
element.innerHTML ='<button>button</button>'; を実行したら
aが消えてなくなるのは当たり前だし、aに設定していたイベントハンドラ
などもなくなるのは当たり前です。

中身をちょっとだけ変えた、element.innerHTML ='<a href="hoge">link2</a>'; を
実行したとき、それを元のaと同じとみなすべきかはわかりません。
よってイベントハンドラを引き継ぐべきかどうかもわかりません。

代入したものは新しいHTMLなのですから、そこに書いているもの以外は初期状態です。

innerHTMLの中身を別物に入れ替えてるんだから
参照は切れるべきでしょ。むしろ残す方がおかしい。

常識を持ち出すならObject型が参照なのは常識
addEventListener 以外にも参照を保持するメソッドが定義されている事は十分に想像できるはずだがな
プリミディブ型のように文字列でゴリゴリ処理する方が不自然だって事が感覚としてわからないなら、その程度の実力って事なんだろうな