Question

我已经制作了一个计数器$计数器，并将其限制设置为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

这里的问题是你将click处理程序多次绑定到同一个元素。

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

中

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

        });
    }
});

Answer 2

在jquery中使用.off()，在创建的动态元素中使用event delegation

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

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

});

Answer 3

在你的代码中，每次单击画布时都会绑定关闭，所以使用标志变量或在jquery上使用它

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

});

Answer 4

问题是因为每次单击canvas元素时，您都会将另一个处理程序附加到close元素。因此，在第三次单击canvas时，您的close处理程序将减少3.您可以通过在close之外放置一个委派的canvas点击处理程序来解决此问题：

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

Answer 5

每次单击画布时，都会在所有.close元素（新旧元素）上分层新的点击处理程序。这意味着在画布上五次单击后，您的第一个div将减少计数器五次，每个单击处理程序一次。使用$("#color-swatch").on('click', '.close', function(evt) { ... })一劳永逸地创建一个活动事件处理程序，它将在您创建`.close'元素时捕获将来的点击，并将其放在画布点击处理程序之外。

Answer 6

那是因为您在每次点击时都添加了点击处理程序。您需要使用.one()或使用.off()

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

或

$(".close").off('click').on('click',function()

Answer 7

使用ID而不是类 e.g。

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

});

}）;

如何在jquery中进行一次调用

7 个答案: