使用 jQuery 生成 div 时的 OnClick 传播答案

【问题标题】：OnClick propagation when generating divs with jQuery使用 jQuery 生成 div 时的 OnClick 传播
【发布时间】：2015-09-29 11:26:00
【问题描述】：

我不确定为什么事件 StopPropagation 技术不适用于这个简单的 onClick 示例 - 事件似乎在 DOM 树上冒泡，并且每次我再次单击时都会以指数方式迭代。

我认为这是因为我使用 javascript 函数生成了 html，我很想知道您为什么认为这没有按预期工作。

编辑：我在 http://jsfiddle.net/Guill84/GsLtN/22/ 创建了一个 jsFiddle。问题变得非常清楚。如果我第一次单击“Text1”，则警报弹出窗口仅出现一次。如果我再次单击它，它会出现两次。如果我再次单击它，它会出现 3 次，以此类推。如何修改脚本使其只运行一次？这让我很生气。

HTML

<body>
    <div id='container'>
        <div id='1'>Text1</div>
        <div id='2'>Text2</div>
    </div>
</body>

Javascript

$(function notice_it(declim) {
    if ($.isNumeric(declim)) { 
        //stuff
    } else {
        declim = 10;
    }
    $("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
    alert(declim);


$('body').on('click', '#1', function (event) {
    event.stopPropagation();
    var declim = 10 - 1;
    notice_it(declim);
});

$('body').on('click', '#2', function (event) {
    event.stopPropagation();
    var declim = 10 + 1;
    notice_it(declim);
});


$('body').on('click', 'body', function (e) {
    e.stopPropagation();
});

});

【问题讨论】：

你真正想做什么？
您的示例中的事件不是bubbling。
最后有一个额外的}); - 您是否只复制+粘贴了一半的代码？即.on 调用在另一个函数中被多次调用。
@freedomn-m，我确实回滚了它，因为我不知道你的编辑..
您好！谢谢您的回答。我已经编辑了我的问题并创建了一个 jsFiddle 来准确地向您展示我遇到的问题。

标签： javascript jquery html

【解决方案1】：

我已经添加了评论，但后来我认为这会以更好的方式解释。

问题

$(function notice_it(declim) {
    if ($.isNumeric(declim)) { 
        //stuff
    } else {
        declim = 10;
    }
    $("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
    alert(declim);

    $('body').on('click', '#1', function (event) {
        event.stopPropagation();
        var declim = 10 - 1;
        notice_it(declim); // Issue
    });
});

这里 notice_it() 用于初始化事件，并在事件处理程序中再次调用它。以下是更新后的JSFiddle - Issues，显示了不同的注册事件。

解决方案

一个简单的解决方案是将用于通知的代码迁移到一个单独的函数中，如以下JSFiddle - Solution1 所做的那样。

一个更好的实现方式是这样的：JSFiddle - Solution2。它有点像Declarative Programming，让其他人很容易理解。

【讨论】：

【解决方案2】：

调用 return false 应该适用于您的场景。

【讨论】：

您好 - 感谢您回复我。不幸的是，这并没有奏效。我添加了一个 jsfiddle，以便您现在可以更清楚地看到问题。

【解决方案3】：

$(function notice_it(declim) {
    if ($.isNumeric(declim)) { 
        //stuff
    } else {
        declim = 10;
    }
    $("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
    alert(declim);


$('body').on('click', '#1', function (event) {
    return false;
    var declim = 10 - 1;
    notice_it(declim);
});

$('body').on('click', '#2', function (event) {
    return false;
    var declim = 10 + 1;
    notice_it(declim);
});


$('body').on('click', 'body', function (e) {
    e.stopPropagation();
});

});

尝试点击返回 false

【讨论】：