WPプラグイン Tablepressの要素をJQUERYで取得したい

Question

ワードプレスのプラグイン、テーブルプレスを使用しています。
このテーブルプレス内のページネーションの｢前へ｣と｢次へ｣のボタンを押すとアラートを出したいです。

下記のソースで要素を取得してアラートを出そうと思いましたが、要素を取得できずアラート表示が出ませんでした。

jQuery(".paginate_button").click(function(){
	alert('Exist');
});

ちなみに上記ソースのセレクタをテーブルプレス外の要素(h1等)に変えたところ、
問題なく要素を取得できアラートが表示されました。

どのようにすれば、テーブルプレス内の要素を取得できるのでしょうか?
初歩的な質問ですみませんが、教えて頂ければ助かります。

↓テーブルプレスのページネーション部分のhtmlです

<div class="dataTables_paginate paging_simple" id="tablepress-139_paginate">
  <a class="paginate_button previous disabled" aria-controls="tablepress-139" data-dt-idx="0" tabindex="0" id="tablepress-139_previous">前</a>
  <a class="paginate_button next disabled" aria-controls="tablepress-139" data-dt-idx="1" tabindex="0" id="tablepress-139_next">次</a>
</div>

Comments

[m.ts10806]

＞動作できません。
起きている現象はなにでしょうか。
https://teratail.com/help/question-tips#questionTips3-4

[rakiamusic]

すみません、説明を変更しました。

[mar-kn]

デバッガで該当ソースの jQuery(".paginate_button") の部分で、要素が取得されているかは確認されましたか？
jQuery(".paginate_button").click(～ と定義しているため、その後の処理の中で、clickイベントが定義され上書きされている可能性があるのでは？と思ったための質問です。

テーブルプレスのデモページ https://tablepress.org/demo/ にて
jQuery(".paginate_button").click(function(){alert("hoge")});
をConsoleで実行すると、PreviousやNextを押した時にアラートが表示されるため、要素は取得できるしアラートも表示できるのではないかと思います。

[rakiamusic]

ありがとう御座います。初期画面では要素が取得されていないようでした。コンソールでJQueryを実行したところアラートが表示されました。

Answer 1

スクリプトの実行順を調整するか、下記のようにしてみてはいかがでしょう。

jQuery( 'body' ).on( 'click', '.paginate_button', function() {
    alert('Exist');
} );

【実践、jQuery - .on()と.off()を使いこなす 1 | CodeGrid】
https://app.codegrid.net/entry/practical-jquery-1#toc-2

【【jQuery】onメソッドの使用方法 - Qiita】
https://qiita.com/katsunory/items/7b50d399329767a893e1#selectorでイベントデリゲート

Comments

[rakiamusic]

参考ページもありがとう御座います。
｢デリゲートを利用したイベント設定｣を元に
https://app.codegrid.net/entry/practical-jquery-1#toc-2

ご教授頂いたJQueryで無事にアラートが表示されるようになりました。
ありがとうございました！