0

I am trying to get a preview of something when i roll over an element ( to see the overall data with that element included) and when I roll out everything is back as it was. The problem is when I move the mouse cursor quick sometimes the mouseout method is not happening and the data remains updated and I dont want that. Any idea how I can do this ?

$(document).on("mouseover", ".checkRezolvata", function(e){
var idTemp = "";
idTemp = $(this).parent().parent().parent().attr("id");
data = {
id: idTemp,
set: 1    }

$.ajax({
    type: "POST",
    url: "crm/setRezolvataTemp.php",
    data: data,
    async: false,
    success: function(data){
    if(data == 1) {
        getStats();
        getTarget();                            
    } else 
    alert("Eroare la schimbarea starii crmului temp!");
    },error: function(){
    alert("eroare");
    }
});             
});

$(document).on("mouseout", ".checkRezolvata", function(){
var idTemp = "";
idTemp = $(this).parent().parent().parent().attr("id");
data = {
id: idTemp,set: 0}

$.ajax({
type: "POST",
url: "crm/setRezolvataTemp.php",
data: data,
async: false,
success: function(data){
    if(data == 1) {
    getStats();
        getTarget();                            
} else 
alert("Eroare la schimbarea starii crmului temp!");
},error: function(){
alert("eroare");
}
});             
});
Rahul Kumar
  • 528
  • 1
  • 3
  • 19
arrd
  • 41
  • 8
  • 1
    What about using `mouseenter/mouseleave` instead?! – A. Wolff Feb 11 '14 at 12:07
  • Same problem with mousetner/mouseleave too – arrd Feb 11 '14 at 12:13
  • So please provide a jsfiddle which replicates your issue – A. Wolff Feb 11 '14 at 12:15
  • Kinda complicated right now to do this, imagine that you have 2 actions, one on mouseetner and one on mouseleave. If you move the cursor over the elements fast enough, if mouseenter happened, it is a chance that mouseleave to not occur. I will post a fiddle later. Thanks! – arrd Feb 11 '14 at 12:20
  • It shouldn't be the case. The only bug concerning this AFAIK is, on some browser, when you leave element and document/window at same time, when element is across border of window. Then ya, sometimes the mouseleave event is not fired. – A. Wolff Feb 11 '14 at 12:24

1 Answers1

1

You can try the mouseenter and mouseleave event handlers in jQuery. mouseover and mouseout is very often a bit tricky, see also:

http://api.jquery.com/mouseenter/

http://api.jquery.com/mouseleave/

The mouseenter event differs from mouseover in the way it handles event bubbling. If mouseover were used in this example, then when the mouse pointer moved over the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseenter event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse enters the Outer element, but not the Inner element.

Flixer
  • 938
  • 1
  • 7
  • 20