信息
大家好, 我添加了一个盒子butten(#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');
}
答案 0 :(得分:4)
您可以使用one()
附加一个事件处理程序,每个元素只应运行一次。试试这个:
$('.container').one('click', '.buy', function() {
if ($("#money").val() < 15) {return;}
$(this).fadeOut(4000, callbackFunction);
$("#money").val(Number($("#money").val()) - 15).triggerHandler('change');
});
API参考:one()
<强>更新强>
您也可以使用unbind()
:
$('.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');
});
答案 1 :(得分:2)
检查代码并为您希望点击仅实施一次的元素实现
$("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');
});
答案 2 :(得分:1)
在创建元素时绑定事件:
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');
};
使用data()来保存数据,而不仅仅是数字