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的内容并将其关闭。

这一切都运作良好。除外...当我打开弹出窗口时，控制台显示“已点击”，当我重新打开弹出窗口时，它会显示“clicked（3）”。关闭后再点击它会显示“clicked（6）”

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

我不明白为什么会这样。我使用以下内容清除内容：

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

有什么想法吗？

Answer 1

正如Amenadiel建议的......我在每次点击时重新宣布了听众。很明显我错过了它。对不起： - /

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

1 个答案: