Question

我似乎无法解决为什么这不会工作，如果你检查下面的链接然后添加3客人然后删除一个计数器去精神。

http://www.waterfrontexeter.co.uk/preordernew/

    var count = 1;
    $(".removeOrder").on('click', function(){

                count--;
                $("#counter").html("Total Number of Guest: " + count);
                $("input[id=totalguest]").val("Total Number of Guest: " + count);

        });

这是我的代码到目前为止，我觉得一切都很好看？我尝试了相反的方法，它加起来很好。

Answer 1

我认为，问题是您网站上的js代码结构不合理。为了避免这种错误，我建议你以更灵活的方式做到这一点：

...
count = $(".duplicate").length; 
...

或者，更好的是，您可以直接编写字符串，而不是将计数器存储在变量中：

var strCount = '';
...
strCount = "Total Number of Guest: " + $(".duplicate").length;
$("#counter").html(strCount);
$("input[id=totalguest]").val(strCount);

Answer 2

您将遇到的一个问题是，每次点击添加访客按钮时，您都会创建新的点击处理程序...

$(".add").click(function () {
    $(".removeOrder").on('click', function(){
        $(this).parents(".duplicate").remove();
        count--;
        $("#counter").html("Total Number of Guest: " + count);
        $("input[id=totalguest]").val("Total Number of Guest: " + count);
    });
});

运行此操作时会发生什么，您需要添加大量额外的点击处理程序。

根据经验，永远不要在事件回调中添加点击处理程序。

要修复它，您应该将点击处理程序移动到委托事件...

$(document).on('click', '.removeOrder', function(){
    $(event.target).closest(".duplicate").remove();
    count--;
    $("#counter").html("Total Number of Guest: " + count);
    $("input[id=totalguest]").val("Total Number of Guest: " + count);
});

Jquery递增向下点击

2 个答案: