jQuery对每个元素只执行一次点击功能？答案

【问题标题】：jQuery execute a click function only once on each element?jQuery对每个元素只执行一次点击功能？
【发布时间】：2012-11-08 09:03:31
【问题描述】：

通过添加盒子按钮 (#purchase)，我将盒子/物品添加到购物车。（这需要 25 个学分）

当你点击里面的橙色 div 时，credits 也会减少 15 credits，并淡出顶部 div（因此你可以看到哪个元素已经花费了 15 个 credits。淡出只发生一次，这很好，但是当它淡出时，用户仍然可以点击 div，这会导致积分减少得超出应有的水平。

我用 .one() 尝试了一些东西，但它只适用于附加的元素之一。谁能告诉我如何做到这一点？以及为什么。

JSFiddle

代码 HTML

<button id="purchase">Add a box </button>
<input id="money">
<div class="container"></div>

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');   
}

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以使用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');
});

【讨论】：

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

【解决方案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');
});

【讨论】：

【解决方案3】：

在创建元素时绑定事件：

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() 来保存数据，而不仅仅是数字

【讨论】：