JQuery function giving old data
<p>I have the following JQuery which allows a user to select/de-select a list of items/prices as a way of creating an automatic quotation. The code looks like this:</p>

<pre><code>$('table.products &gt; tbody &gt; tr').click(function(){
    if ($(this).find('div.price').is(":visible")) {
        $(this).find('div.price, img.selected').fadeOut(100);
    } else {
        $(this).siblings('div.price, img.selected').fadeIn(100);                    
    }
    recalc();
});
</code></pre>

<p>It's actually more complicated than that (hence the reason I haven't used <code>toggle()</code> but the above is just a simplified example for the purpose of this question.</p>

<p>Anyway, the above code works fine. If the table row is clicked then the price and image are either selected/de-selected depending on what they whether the price was already showing or not.</p>

<p>Then I have a call to a function called <code>recalc();</code> at the end.. it looks like this (again, this is a simplified version):</p>

<pre><code>function recalc() {
    var numOfProducts = $('table.products div.price:visible').length;
    alert(numOfProducts);
}
</code></pre>

<p>The problem I am having here is that the alert always returns the value that would have been correct before anything was changed.</p>

<p>For example, if there are no <code>div.price</code> visible and I select one, one will become visible but the alert shows <code>0</code>. Then, if I select another one, that makes 2 visible but the alert only shows <code>1</code> because that's what it was when I clicked. If I then click one of the items I already clicked in order to de-select it, it will display <code>2</code> </p>

<p>So, my question is how am I supposed to ensure that the function call happens after everything else has been done?</p>
