javascript - 如何在jquery中一次性调用函数

Question

我制作了一个计数器 $counter 并将其限制设置为 10。现在在点击屏幕后，我添加了 div 标签并将计数器增加 1。但同时我在每个 div 上添加了一个关闭按钮并且每次单击 div.close 时计数器减 1。但是由于同一个类.close。但是一次单击计数器会减少很多次。

$(canvas).click(function() {
    $counter++;
    if($counter<10)
    $("#color-swatch").prepend("<div>"+color+"<div class='close'></div></div>");
    $(".close").click(function()
    {
        $(this).parent().remove();
        $counter--;
        console.log($counter);

    });
});

只需单击关闭 div 即可输出控制台。

10 9 8个 7 6

Answer 1

这里的问题是您将点击处理程序多次绑定(bind)到同一个元素。

这里的一个解决方案是使用事件委托(delegate)而不是将处理程序绑定(bind)到另一个点击处理程序中

$(canvas).click(function () {
    $counter++;
    if ($counter < 10) {
        $("#color-swatch").prepend("<div>" + color + "<div class='close'></div></div>");
    }
});

$("#color-swatch").on('click', '.close', function () {
    $(this).parent().remove();
    $counter--;
    console.log($counter);
});

---

另一种是只针对新添加的元素

$(canvas).click(function () {
    $counter++;
    if ($counter < 10) {
        var $el = $("<div>" + color + "<div class='close'></div></div>").prependTo("#color-swatch");
        $el.find(".close").click(function () {
            $(this).parent().remove();
            $counter--;
            console.log($counter);

        });
    }
});