私はこのような動的なコンテンツをロードする動的にロードされたコンテンツの反復するイベント

Question

をクリックしてください：

$('.cPopUpOverlay').fadeIn('fast'); 
$('.cPopUpOverlay').append('<div class=\'cPopUpContent\'></div>'); 
$('.cPopUpContent').load('popups/popup_1.php'); 
$('.cPopUpContent').fadeIn('fast'); 

popup_1.phpは、いくつかのデータ+簡単なボタンがあります。

<input type='button' id='btn_action_add' action='add' value='add'> 

繰り返しますが、私はコードの最初の4行を実行ページから、これがあります：基本的に

$('.cPopUpOverlay').on('click', 'input[type=\'button\']', function() { 
    console.log('clicked'); 
    $('.cPopUpOverlay').fadeOut(); 
    $('.cPopUpOverlay').html(''); 
} 

、それはコンソールに「クリック」を送信し、popup_1.phpの内容を削除しますそれを閉じます。

これはすべてうまくいきます。例外...ポップアップを開くとコンソールに「クリック」と表示され、ポップアップを再度開くと「クリック（3）」と表示されます。もう一度閉じてクリックすると、「クリック済み（6）」と表示されます。

ポップアップを再度開くたびに、n回のクリックを実行します.nはポップアップを開く回数です。 Clickイベントがどこかに残っているように、ポップアップが開くたびに.on（ 'click'）イベントが発生したときに評価される余分なボタンがあるかのように、何度も何度も実行されます。

これはなぜわかりません。

$('.cPopUpOverlay').fadeOut(); 
$('.cPopUpOverlay').html(''); 

アイデアを使用してコンテンツをクリアしますか？

Answer 1

Amenadielが示唆したように、私は各クリックでリスナーを再宣言しました。あまりにも明白な私はそれを逃した。申し訳ございません： -/