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

我做了一个计数器$counter，并将其限制为10。现在，在点击屏幕之后，我添加了div标签，并将计数器增加了1。除此之外，我还在每个div上添加了一个close按钮，并在每次单击div.close时将计数器减少1。但是由于同一个班级。接近。但计数器在一次单击中会减少很多次

$(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);

    });
});

$（画布）。单击（函数（）{
$counter++；
如果代码中的（$counter在每次单击画布时都会绑定关闭，那么在jquery中使用flag变量或use on one

$(".close").one("click",function(){

或

使用标志变量检查是否关闭按钮是否准备好单击

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

});

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

});

var isReadyCloseClick=false；
$（画布）。单击（函数（）{
$counter++；
如果（$counter<10）{
$（“#色样”）.prepend（“+color+”）；
}
isReadyCLOCESCLICK=true；
});
$（“#色样”）。在（“单击”，“关闭”，函数（）{
如果（isReadyCLOCESCLICK）{
$（this.parent（）.remove（）；
$counter--；
控制台日志（$counter）；
}
});
问题是因为每次单击
画布
元素时，您都会将另一个处理程序附加到关闭元素。因此，在第三次单击
画布
时，您的
关闭
处理程序将减少3。您可以通过将单个委托的
关闭
单击处理程序放在
画布之外来解决此问题
1：

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

$（画布）。单击（函数（）{
$counter++；
如果（$counter<10）
$（“#色样”）.prepend（“+color+”）；
});
$（“#色样”）。在（'click'，'.close'，function（）上{
$（this.parent（）.remove（）；
$counter--；
控制台日志（$counter）；
});
这里的问题是，您多次将单击处理程序绑定到同一个元素

这里的一个解决方案是使用事件委派，而不是将处理程序绑定到另一个单击处理程序中

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

$（画布）。单击（函数（）{
$counter++；
如果（$counter<10）{
$（“#色样”）.prepend（“+color+”）；
}
});
$（“#色样”）。在（'click'，'.close'，函数（）{
$（this.parent（）.remove（）；
$counter--；
控制台日志（$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);

        });
    }
});

$（画布）。单击（函数（）{
$counter++；
如果（$counter<10）{
var$el=$（“+color+”）.prependTo（“#色样”）；
$el.find（“.close”）。单击（函数（）{
$（this.parent（）.remove（）；
$counter--；
控制台日志（$counter）；
});
}
});
每次单击画布时，都会在所有
元素上分层一个新的单击处理程序。关闭
元素，新的和旧的。这意味着在画布上单击五次后，您的第一个div将递减计数器五次，每次单击处理程序一次。使用
$（“#色样”）。打开（'click'，'close'，function（evt）{…}）
要一次性创建一个活动事件处理程序，它将在创建“.close”元素时捕获将来的单击，并将其放在画布单击处理程序之外。
这是因为每次单击都要添加单击处理程序。
您需要使用
.one（）
或使用
.off（）

$（“.close”）.one（'click'，function（）

或

$（“.close”）.off（'click'）。on（'click'，function（）
在jquery中使用
.off（）
，对于创建的动态元素使用
事件委托

$("#color-swatch").on("click" , ".close" , function() {

         $(this).off("click");
         $(this).parent().remove();
        $counter--;
        console.log($counter);

});

使用ID而不是类
e、 g

$（画布）。单击（函数（）{
$counter++；
如果（$柜台
$(canvas).click(function() {
$counter++;
if($counter<10){
var clsId="cls_"+$counter;
$("#color-swatch").prepend("<div>"+color+"<div class='close' id='"+clsId+"'></div></div>");
}
$(clsId).click(function()
{
    $(this).parent().remove();
    $counter--;
    console.log($counter);

});