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");
}
});
});
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.
来源:https://stackoverflow.com/questions/21701260/jquery-mouseover-and-mouseout-bug