I have a set of element with the same class selector. When I enter mouse on this element I want to send Ajax query, but. When I just console.log(1); on mouse enter all fine, but when I send request it rise in some progression, and each next hover send many requests instead of one. Here is my code:

$(document).ajaxComplete(function () {
    $('.device_hover').each(function (key, val) {
        $(val).mouseenter(function () {
            var val = $(this).html();
            console.log(1);

            $.ajax({
                'type': 'POST',
                'url': 'handlers/route_request.php',
                'dataType': 'html',
                'success': function (data) {
                    console.log(data);
                }
            });
        });
    });
});

Can somebody help me? Maybe I am doing something wrong?

I have a set of element with the same class selector. When I enter mouse on this element I want to send Ajax query, but. When I just console.log(1); on mouse enter all fine, but when I send request it rise in some progression, and each next hover send many requests instead of one. Here is my code:

$(document).ajaxComplete(function () {
    $('.device_hover').each(function (key, val) {
        $(val).mouseenter(function () {
            var val = $(this).html();
            console.log(1);

            $.ajax({
                'type': 'POST',
                'url': 'handlers/route_request.php',
                'dataType': 'html',
                'success': function (data) {
                    console.log(data);
                }
            });
        });
    });
});

Can somebody help me? Maybe I am doing something wrong?

• javascript
• jquery
• ajax
• mouseevent

• You should provide a queue of requests in such a case. Keep in mind that each time you will be entering on a .device_hover element (also, you don't need the .each.. $('.device_hover') will automatically bind an event listener to each DOM element with that class) it will perform a request, which will result in a selvage polling. I would personally remend you to use a flag or something like that to check whether the user is hovering an element or not (also, use .hover or .on('mouseover') instead of mouseenter), set a flag and execute the ajax request ONLY ONCE. – briosheje Commented Mar 11, 2015 at 8:37
• Add a status to the element that has already been hovered on, such data-ajax="done" and then on the next hover, if ajax==done do nothing. – lshettyl Commented Mar 11, 2015 at 8:44
• @briosheje, thanks, but I want to be able repeat send ajax, when will hover second time. I need to somehov delete identifier. and what reasong to not use mouseenter? – nowiko Commented Mar 11, 2015 at 9:06
• @briosheje, solve this by add .on('mouseleave' – nowiko Commented Mar 11, 2015 at 9:13
• @excluded_once: you can set that flag to FALSE when the user leaves the element or use LShetty's idea basically you use .mouseleave to set the flag to false and .mouseenter to set the flag to true. In a nutshell, the idea is to execute an ajax request and, once it has been already executed, set the flag back to false. In this way you won't have an insanely long ajax queue if a user goes over and out many times in a short amount of time. In any case, .mouseenter triggers only if the hover happens from a parent div to a child one, while the .mouseover happens in both ways. – briosheje Commented Mar 11, 2015 at 9:18

2 Answers 2

I think the best way is to use hover event for sending ajax request. This will send only once.

$(".device_hover").hover(function(){

   var val = $(this).html();
        console.log(1);

        $.ajax({
            'type': 'POST',
            'url': 'handlers/route_request.php',
            'dataType': 'html',
            'success': function (data) {
                console.log(data);
            }
  }, function(){
    //This function is for unhover.
 }); 

Instead of using hover event, you can make use of onmouseenter and onmouseleave events to make a call only once.