Ajaxによる遅延ロードした要素に対する、jqueryによる操作の仕方について

Question

追記：
アドバイスでAJAX起因ではなくプラグインが怪しいと推測し、解決が大変そうなので諦めます。
と言うのは、コード教えて…となると、プラグインの詳細の話までぶっこんでいくことになるのでかなり負担をかけてしまいそうです。取り敢えず保留しているのは、「いえいえ、AJAXの問題で、このような処理をすればDOM操作出来るようになりますよ」的な回答もなきにしに非ず…かも、と思いまして少しこのままにさせて頂きます。

---

最近、JS,JQueryともに始めたばかりです。足らずが多くあると思いますがよろしくお願いします。
基礎知識の不足と思われるので概要のみ書かせていただきますので、参考になるサイトを教えていただけないでしょうか？。

---

・行いたいこと
JQueryプラグイン(DataTables)による遅延ロードされたテーブルをDOM要素指定で操作（値取得）をしたい。

・問題

<table id="tblAjxLoad">
<tr><td id="r_0001">ABC</td></tr>
<tr><td id="r_0002">DEF</td></tr>
<tr><td id="r_0003">GHI</td></tr>
...
</table>

console.log($("#r_"+record_id).text()); 

クリックイベント？に結びつけてコンソールに表示させても、上段から３〜４目までしか表示されず、その後は空白のみ取得されます。

・考察
当たり前の話になりますでしょうがJQueryは基本、

$(document).ready(function(){...})

から始まりますが、これをやらないと正しく挙動しないそうです。

これはブラウザがDOM要素を完全に読み込んでDOM全体をJQueryのオブジェクトとしてセットして、初めてその操作が構造的に成り立つからではないかと推測してます。
逆に言うと、今回は$(document).ready後に、Ajaxにより新たに追加された要素なのでJQuery側で認識出来ないのではないかと考えています。

・ご教授いただきたいこと
AJAXで遅延リードしたDOM要素をJQueryで操作するときの、実行しなければいけないこと、あるいは、お作法を掲載しているサイト等をご紹介いただけると幸いです。

よろしくお願いします。

Answer 1

Ajaxによって新たに追加された後、というタイミングで実行するコードを書かないとできないです。
APIを見たところ、drowイベントかxhrイベントに関連付けて、実行すればよさそうです。

https://www.datatables.net/reference/event/

$('#myTable').on( 'draw.dt', function () {
   console.log($("#r_"+record_id).text());
} );

$('#myTable')
    .on('xhr.dt', function ( e, settings, json, xhr ) {
        console.log($("#r_"+record_id).text());
    } )；

Comments

[ssmxgo]

なるほど！！！
実は今回のそれは当てはまるかわかりませんが、動的にレコードをいじったらまさにこれやらないといけないですね。

参考になりました！

Answer 2

あう、お恥ずかしい。
原因わかりました。
レコードの文字列指定すべきところを、""で囲い忘れて
あたまが000から始まる数値を認識できなかっただけのようでした（汗）（汗）（汗）

0000123→123として引数で渡されてました

Answer 3

確認ですが、既存のtrにidが振られているのに対して、追加された分にはidがついていますでしょうか。デベロッパーツールでも見られますので、まずはそこの確認をするのがいいでしょう。

なお、jQueryはその実行時点で存在するエレメントについては問題なく動作しますので、ページロード→（ready）→Ajaxで読み込み→（読み込み完了後に）コンソールを叩く、という流れであれば、コンソールからでも増えた要素を操作可能です。

Comments

[ssmxgo]

ありがとうございます。追加分は間違いなく付いています。
追加という表現が悪かったかもしれませんが、table自体が全てAJAXでロードした後に生成されます（多分）

＞Ajaxで読み込み→（読み込み完了後に）コンソールを叩く、という流れであれば、コンソールからでも増えた要素を操作可能です。
んんん。。。そうですか(-_-;)
そうなると、何が問題なのかさっぱりわからなくなりました（汗）

厳密にいうとテーブルのレコード毎にbutton要素があり、そこにonClick="myEvent(record_id)"みたく振ってあるんです。
で、イベント先で先程のログを吐く関数に繋げてるので、ボタンを押すことが出来るとこすなわち、遅延してロードされたされている(可視)状態です。

こいつは一筋縄では行かなそうですね…。