简单但奇怪的 HTML、jQuery 问题。无缘无故的函数循环

Question

我用 javascript (jQuery) 编写了代码，它允许用户在每次点击按钮时在网站上创建一个“框”，并在点击该框后收到警告消息。

它的工作原理是这样的： 1) 当用户按下“添加 (#addBox)”按钮时 - jQuery 会在 HTML 文件中添加一个新行，从而创建“盒子”（由于 CSS 代码，它看起来像一个盒子）。 2) 如果用户按下该框，它会发出警报消息“Hello”。

但是如果我添加多个框然后单击第一个框，而不是发送一条警报消息，它会发送与创建框数量一样多的时间。

示例： 1) 我有 1 个盒子。通过按下它，我会收到 1 条警报消息。 2) 我有 2 个盒子。通过按最上面的一个，我收到 2 条警报消息。 按第二个，我收到 1 条消息。 3) 我有 3 个盒子。通过按最上面的一个，我收到 3 条警报消息。 按第二个，我收到 2 条消息。 按第三个，我收到 1 条消息。

由于某种原因，发送警报消息的功能正在循环。 所以这里是代码：

function addBox()
{
    $("#addBox").on("click", function () {
        $("#addBox").append('<div class="desiredBox">Say Hello</div>');
        }

        boxCount();
    });
}

function boxCount()
{
    $(".desiredBox").on("click", function () {
        alert("Hello");
    });
}

任何想法，如何让它们每个只发送一条消息，防止函数“boxCount()”循环？

Answer 1

每次调用函数boxCount 时，都会将一个事件处理程序添加到现有元素，即".desiredBox"。因此您会收到多个警报。

当您动态创建元素时。

您需要使用Event Delegation。您必须使用委托事件方法使用.on()。

一般语法

$(document).on(event, selector, eventHandler);

理想情况下，您应该将document 替换为最近的静态容器。

完整代码

$("#addBox").on("click", function () {
    $("#addBox").append('<div class="desiredBox">Say Hello</div>');        
});
$(document).on('click', '.desiredBox', function(){
  //Your code
});

Answer 2

使用事件委托，这样您就不会一遍又一遍地将click 事件添加到.desiredBox：

$(document).on("click", "#addBox", function () {
    $("#addBox").append('<div class="desiredBox">Say Hello</div>');
    $(".desiredBox").trigger("click");
});


$(document).on("click", ".desiredBox", function () {
    alert("Hello");
});