jQuery execute a click function only once on each element?
<p><strong>Information</strong></p>

<p>hello all,
with my add a box butten (#purchase), I add boxes/items to the shopping carts. (this costs 25 of the credits)</p>

<p>When you click the orange div inside, the credits also decrease with an amount of 15 credits, an fades out the top div (so you can see wich element has already cost 15 credits. Fading out happens only once, which is good, but while it's fading out, the user can still click the div, wich causes the credits to decrease more than should.</p>

<p>I tried some things with .one() but then it only works on one of the appended elements. 
Can anyone advise me how I can accomplish this? And why. </p>

<p><a href="http://jsfiddle.net/WXyk6/" rel="nofollow"><strong>JSFiddle</strong></a></p>

<p><strong>Code</strong>
<em>Html</em></p>

<pre><code>&lt;button id="purchase"&gt;Add a box &lt;/button&gt;
&lt;input id="money"&gt;
&lt;div class="container"&gt;&lt;/div&gt;
</code></pre>

<p><em>JS</em></p>

<pre><code>var counter = 0;
$("#money").val(250);

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

   if ($("#money").val() &lt; 25) {return;}
    var box = $('&lt;div class="box"' + (counter) + '&gt;&lt;div class="yellow"' + (counter) + '&gt;&lt;div class="buy"' + (counter) + '&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;').appendTo('.container');
    $("#money").val(Number($("#money").val()) - 25).triggerHandler('change');

});

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

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

function callbackFunction() {
 alert('done');   
}
</code></pre>
