单击动态加载的内容迭代事件

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('');
}

基本上，它将“clicked”发送到控制台并删除popup_1.php的内容并关闭它。

这一切都很好。除了......当我打开弹出窗口时，控制台显示“点击”，当我重新打开弹出窗口时，它显示“点击（3）”。再次关闭并单击它显示“单击（6）”

每次我重新打开弹出窗口时，它都会执行 n 次点击，其中 n 是我打开弹出窗口的次数。就像 click 事件保留在某处并一次又一次地执行，就好像每次打开弹出窗口时都会有一个额外的按钮在 .on('click') 事件触发时进行评估。

我不明白这是为什么。我使用以下命令清除内容：

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

有什么想法吗？

Answer 1

正如 Amenadiel 建议的那样……我在每次点击时都重新声明了监听器。太明显了，我错过了。对不起：-/