通过添加框按钮 (#purchase),我将框/物品添加到购物车。(这需要 25 个学分)
当你点击里面的橙色 div 时,学分也会减少 15 个学分,并淡出顶部 div(因此你可以看到哪个元素已经花费了 15 个学分。淡出只发生一次,这很好,但是当它正在淡出,用户仍然可以单击 div,这会导致积分减少超过应有的程度。
我用 .one() 尝试了一些东西,但它只适用于附加的元素之一。谁能告诉我如何做到这一点?以及为什么。
代码 HTML
<button id="purchase">Add a box </button>
<input id="money">
<div class="container"></div>
JS
var counter = 0;
$("#money").val(250);
$('#purchase').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');
});
$('#money').change(function() {
$('#purchase').prop("disabled", $(this).val() < 25);
});
$('.container').on('click', '.buy', function() {
if ($("#money").val() < 15) {return;}
$(this).fadeOut(4000, callbackFunction);
$("#money").val(Number($("#money").val()) - 15).triggerHandler('change');
});
function callbackFunction() {
alert('done');
}