jqueryで動的に追加した要素に対し、jquery.colorbox.jsのイベントを付与したい

Question

みなさま

いつもお世話になっております。

jqueryの挙動について質問させていただきます。

jqueryで動的に追加した要素に対し、jquery.colorbox.jsのイベントを付与したいのですが、
どうしてもうまくいかず投稿いたします。

---

■環境
ネット上のVPSサーバ(LAMP環境)

■やったこと
・wordpress上で、画面を構築し、画面のリロードなしで
jqeuryで動的に要素「.add_elements」を追加する動きを実装。

・その追加した要素「.add_elements」に対して、jquery.colorbox.jsのイベントを付与したい

■起こったこと
①動的に追加した要素「.add_elements」に対し、次のようなjqueryを割り当てているが、
クリックしても動作しない。

↓javascriptの.jsファイルとして保存

(function ($) {

	$(".add_elements").colorbox({
		maxWidth:"50%",
	});

})(jQuery);

■調査した情報
①当初、要素の追加漏れかと思い、ブラウザの開発者ツールで要素を確認したところ
目的の要素「.add_elements」は正しく追加されていました。

②js側は特に変更なく、画面が読み込まれた際に
$(".add_elements").colorbox({
というように、要素のクラス名に「.colorbox」というメソッドを割り当てています。

③画面初期表示の要素には上記のメソッドが正しく呼ばれています。

■期待する動作と質問事項
要素追加時に、jquery.colorbox.jsのクリックが反応するようにしたいです。

---

有識者の方のアドバイスをいただければ幸いです。
どうぞよろしくお願いします。

Answer 1

<div>
<a href="https://placehold.jp/24/cc9999/993333/350x250.png"><img src="https://placehold.jp/24/cc9999/993333/150x50.png" alt=""></a>
</div>
<button>add</button>

$( function() {
	$( 'a' ).colorbox( { maxWidth:'50%' } );
	$( 'button' ).on( 'click', function() {
		$( 'div' ).append( '<a href="https://placehold.jp/24/cc9999/993333/350x250.png"><img src="https://placehold.jp/24/cc9999/993333/150x50.png" alt=""></a>' );
		$.colorbox.remove();
		$( 'a' ).colorbox( { maxWidth:'50%' } ).removeClass( 'no-color' );
	} );
} );
```**動くサンプル：**[https://jsfiddle.net/xvuvt1ua/](https://jsfiddle.net/xvuvt1ua/)

Comments

[ebsffzal]

kei344さま

サンプルまで提示いただきまして、大変ありがとうございました。

この問題につきましては、wordpress側で無限スクロールプラグインを使っていた為の問題でした。
プラグインを使わずに、jsのライブラリを実装することで解決にいたりました。

Answer 2

質問者様のコードでは、
初期処理で存在するDOMの「add_elements」クラスに対してトリガーをセットしていることになっています。

つまり、
後から追加した「add_elements」クラスにはトリガーが適用されていないため、
何も起こらない状態となっています。

解決策として何通りかあるのですが、
とりあえず、要素を追加した後にまたトリガーを貼ってあげれば動きます。