【jquery】動的に生成した要素にクリックイベントを設定する方法

動的生成された要素にクリックイベントを設定する

動的に生成された<p class="after"></p>にクリックイベントを仕込む時の例

×　通常の書き方

既に存在する要素にクリックイベントを仕込むときは動く

$('p.after').on('click', function(){
	alert('クリックされた');
	console.log('クリックされた');
});

○　動的な要素にクリックイベントを設定する方法

動的に生成された要素にクリックイベント仕込むときはこっち

$(document).on('click', 'p.after', function(){
	alert('クリックされた');
	console.log('クリックされた');
});

テスト用に使ったコード

<p class="before">テスト</p>
<script>
jQuery(function($){
  // 動的要素を生成
  $('p.before').on('click', function(){
    $('p.before').after('<p class="after">テスト</p>');
  });
  // 動かない
  $('p.after').on('click', function(){
    alert('クリックされた01');
    console.log('クリックされた01');
  });
  // 動く
  $(document).on('click', 'p.after', function(){
    alert('クリックされた02');
    console.log('クリックされた02');
  });
});
</script>

本当はプラグイン側で生成された要素にクリックイベント仕込もうと思って調べたんだけど
結局プラグイン側で生成した要素にクリックイベントを仕込む事ができなかった
なんかエラーでる

エラー

jquery.min.js:3 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See