Javascript jQuery是否在每个元素上只执行一次单击功能？

通过我的“添加盒子”按钮（#购买），我将盒子/物品添加到购物车中。（这将花费25个学分）

单击内部的橙色div时，点数也会减少15个点数，并淡出顶部div（所以你可以看到哪个元素已经花费了15个积分。淡出只发生一次，这很好，但是当淡出时，用户仍然可以单击div，这会导致积分的减少超过他们应该的程度

我尝试了一些使用.one（）的方法，但是它只对一个附加元素起作用。 有人能告诉我如何才能做到这一点吗？为什么

代码 Html

添加一个框

JS

var计数器=0；
美元（250美元）；
$（“#购买”）。单击（函数（）{
if（$（“#money”）.val（）<25{return；}
变量框=$（''）.appendTo（'.container'）；
$（“#money”）.val（Number（$（“#money”）.val（））-25.triggerHandler（'change'）；
});
$（“#money”）.change（函数（）{
$（'#purchase'）.prop（“禁用”，$（this.val（）<25）；
});
$（'.container'）。在（'click'，'.buy'，函数（）上{
if（$（“#money”）.val（）<15{return；}
$（this）.fadeOut（4000，callbackFunction）；
$（“#money”）.val（Number（$（“#money”）.val（））-15.triggerHandler（'change'）；
});
函数callbackFunction（）{
警报（“完成”）；
}

您可以使用

one（）

附加事件处理程序，每个元素只应运行一次。请尝试以下操作：

$('.container').one('click', '.buy', function() {
    if ($("#money").val() < 15) {return;}
    $(this).fadeOut(4000, callbackFunction);
    $("#money").val(Number($("#money").val()) - 15).triggerHandler('change');
});

---

检查代码并为您希望单击只实现一次的元素实现它

$("purchase").one("click", function() {
if ($("#money").val() < 25) {return;}
var box = $('<div class="box"' + (counter) + '><div class="yellow"' + (counter) + '><div       class="buy"' + (counter) + '></div></div></div>').appendTo('.container');
$("#money").val(Number($("#money").val()) - 25).triggerHandler('change');
});

$（“购买”）.one（“点击”，函数（）{
if（$（“#money”）.val（）<25{return；}
变量框=$（''）.appendTo（'.container'）；
$（“#money”）.val（Number（$（“#money”）.val（））-25.triggerHandler（'change'）；
});

创建元素时绑定事件：

var counter = 0;
$("#money").val(250);



$('#purchase').click(function() {


    if ($("#money").val() < 25) {return;} // or alert('not enough money');
    $('<div class="box">').data('counter',counter)
           .append($('<div class="yellow">').data('counter',counter)
           .append($('<div class="buy">').data('counter',counter).one('click',buy_click)
                  )).appendTo('.container');
    $("#money").val(Number($("#money").val()) - 25).triggerHandler('change');

});

$('#money').change(function() {
    $('#purchase').prop("disabled", $(this).val() < 25);
});

var callbackFunction=function() {};

var buy_click=function() {
    if ($("#money").val() < 15) {return;}
    $(this).fadeOut(4000, callbackFunction);
    $("#money").val(Number($("#money").val()) - 15).triggerHandler('change');
};

var计数器=0；
美元（250美元）；
$（“#购买”）。单击（函数（）{
if（$（“#money”）.val（）<25{return；}//或alert（'钱不够'）；
$（''）.data（'计数器'，计数器）
.append（$（''）.data（'counter'，counter）
.append（$（''）.data（'counter'，counter.）.one（'click'，buy_click）
)).appendTo（“.container”）；
$（“#money”）.val（Number（$（“#money”）.val（））-25.triggerHandler（'change'）；
});
$（“#money”）.change（函数（）{
$（'#purchase'）.prop（“禁用”，$（this.val（）<25）；
});
var callbackFunction=function（）{}；
var buy_click=函数（）{
if（$（“#money”）.val（）<15{return；}
$（this）.fadeOut（4000，callbackFunction）；
$（“#money”）.val（Number（$（“#money”）.val（））-15.triggerHandler（'change'）；
};

使用data（）保存数据，而不仅仅是数字

---

感谢您的快速回复，但这仍然留下了多次单击和减少积分的机会（淡出）。您可以通过快速单击5次左右看到这种情况。我真的非常感谢您的帮助，不幸的是，我仍然可以通过非常快地单击1个元素来减少多次积分

$('.container').on('click', '.buy', function() {
    $(this).unbind('click');
    if ($("#money").val() < 15) {return;}
    $(this).fadeOut(4000, callbackFunction);
    $("#money").val(Number($("#money").val()) - 15).triggerHandler('change');
});

$("purchase").one("click", function() {
if ($("#money").val() < 25) {return;}
var box = $('<div class="box"' + (counter) + '><div class="yellow"' + (counter) + '><div       class="buy"' + (counter) + '></div></div></div>').appendTo('.container');
$("#money").val(Number($("#money").val()) - 25).triggerHandler('change');
});

var counter = 0;
$("#money").val(250);



$('#purchase').click(function() {


    if ($("#money").val() < 25) {return;} // or alert('not enough money');
    $('<div class="box">').data('counter',counter)
           .append($('<div class="yellow">').data('counter',counter)
           .append($('<div class="buy">').data('counter',counter).one('click',buy_click)
                  )).appendTo('.container');
    $("#money").val(Number($("#money").val()) - 25).triggerHandler('change');

});

$('#money').change(function() {
    $('#purchase').prop("disabled", $(this).val() < 25);
});

var callbackFunction=function() {};

var buy_click=function() {
    if ($("#money").val() < 15) {return;}
    $(this).fadeOut(4000, callbackFunction);
    $("#money").val(Number($("#money").val()) - 15).triggerHandler('change');
};