- ベストアンサー
jQueryのappendソース反映
- jQuery初心者です。壁にぶつかりました。
- 取り込んだ英文を単語分解してjQueryのappend処理をすると画面上は正しく処理されるのですが、ソース上が反映されていません。
- 上記のプログラムでは、追加された単語上では動かないことが分かりました。document.write()を使うと即時ソースに反映されますが、cssがうまく適用されないので困っています。
- ttomioka
- お礼率67% (104/153)
- JavaScript
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
clickイベントの方がないのでなんとも言えませんが、 https://www.google.co.jp/search?q=jquery+%E8%BF%BD%E5%8A%A0+%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88&oq=jquery+%E8%BF%BD%E5%8A%A0%E3%80%80%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88&aqs=chrome..69i57j0l5.7305j0j7&sourceid=chrome&ie=UTF-8 ソースに反映されていない云々ではなく、appendしたものに対して正しくイベントが設定できていないものだと思われます。 追加したものに対してイベントするときは注意が必要 ということを覚えておいてググるといいです！ https://qiita.com/horikeso/items/5f6863a49e8348f63c4b $(document).on("click", selector, function () { // 処理 }); の selectorの部分はありますか。 jquery append クリック とうで調べるといいかもです
その他の回答 (2)
- t_ohta
- ベストアンサー率38% (5238/13705)
＞ オブジェクトにイベントをバインドしないといけないとの事ですが、javascriptで下記の記述をしています。最初からある"top","about","above"はこれに発火しています。これでは、追加した単語では発火しないのでしょうか？ $('.word').click()の実行とpasteAreaChange2()の実行の順番の問題でしょう。 $('.word').click()を実行した時にDOMに存在しないオブジェクトにはイベントはバインドされませんので、後から追加したオブジェクトには個別にイベントを設定してあげる必要があります。 $('.word') と書くと全ての word クラスのオブジェクトにイベントが設定されるように思ってしまうかもしれませんが、jQueryの動作としては処理を実行した時点でDOMに存在する word クラスのオブジェクトに対してだけ click イベントをバインドしているだけで、後から追加された word クラスのオブジェクトにまで勝手にイベントをバインドしてくれるモノではありません。
お礼
さっそくのご回答、ありがとうございます。 > $('.word') と書くと全ての word クラスのオブジェクトにイベントが設定されるように思ってしまうかもしれませんが... 全くその通りに思っていました。 ご指摘ありがとうございました。
- t_ohta
- ベストアンサー率38% (5238/13705)
＞ 取り込んだ英文を単語分解してjQueryのappend処理をすると画面上は正しく処理されるのですが、ソース上が反映されていません。どうすればソース上も反映されるのでしょうか？ JavaScriptでDOMに追加したモノは、ブラウザの「ソースを表示」で見ても反映されることは原則ありません。 ブラウザが処理しているDOMの状態を見たい時は開発者ツールで見るしかありません。 文字をクリックした際の処理は、それぞれのオブジェクトにイベントをバインドしないといけませんからappendで追加したオブジェクトにもイベントを追加してやらなければクリックしても動作しません。
お礼
早速のご回答、ありがとうございます。 オブジェクトにイベントをバインドしないといけないとの事ですが、javascriptで下記の記述をしています。最初からある"top","about","above"はこれに発火しています。これでは、追加した単語では発火しないのでしょうか？ $(function(){ $('.word').click(function(){ var word = $(this).text(); viewDict(word); }); });
お礼
さっそくのご回答、ありがとうございます。 そうですか、追加した要素にはイベントは自動では設定されないのですね。 とても有意義なご指摘、大変ありがとうございました。 参考URLまで示して頂きましてありがとうございました。