Jquery events on multiple clicks

Question

I am attempting to make the Tipsy Tooltip show on click, and disappear on the second click. As well, the tooltip is not showing on the first (odd) click. Instead it shows on the third click.

HTML

<p id="more_pricing_info">
<a id="more_pricing_info_tooltip" rel='tipsy' title='Well hello there' onclick='$("#more_pricing_info a[rel=tipsy]").tipsy("show"); return false;'>
    More Info
</a>
</p>

Javascript

$(function() {
$('#more_pricing_info').click(function() {
    var clicks = $(this).data('clicks');
    if (clicks) {
        // odd clicks
        $('#more_pricing_info a[rel=tipsy]').tipsy({trigger: 'manual', gravity: 'se'});
    } else {
        // even clicks
    }
        $(this).data("clicks", !clicks);
});
});

Answer 1

Your element needs an initial "click" value, otherwise the first time you pull it, your clicks var is undefined . Then you set it to !clicks , which evaluates to false . Then, the second time you click, your script sees that clicks is false, so it skips the tooltip and sets clicks to true. On the 3rd click, your code sees that clicks is finally true, and the tooltip triggers.

In order to set an initial value for 'clicks, add this attribute to your anchor tag:

data-clicks="true"

Also, you may need to remove the onclick attribute in your anchor tag, and just let your javascript code handle the click event.

So, here's your new anchor tag:

<p id="more_pricing_info">
<a id="more_pricing_info_tooltip" data-clicks="true" rel='tipsy' title='Well hello there' >
    More Info
</a>
</p>