Question

I would like to load data(via ajax) in a tooltip when the mouse is over a specific area. The problem is that the ajax call is made as long as my mouse is on that area. Is there any way, that I could make onmouseover (ajax call) efect happen just once? Here is the code:

$.post('calendar/event-details', {'eventId' :event.id},
            function (data){
                this.top = (ui.clientY + 15); this.left = (ui.clientX - 230);
                $('body').append( '<div id="vtip">' + data + '</div>' );
                $('div#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");
                $('div#vtip').css("position","absolute");
                $('div#vtip').css("z-index", "+99");
            })

Answer 1

With .one:

$('element').one('mouseover', function() { /* ajax */ });

.one will detach the handler as soon as it is executed. As a result, it won’t execute any more times.