CODEWITHSUNDEEP
javascriptjqueryajaxmouseevent
nowiko
nowiko

Reputation: 2567

Send ajax request on mouseover

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?

Upvotes: 1

Views: 15081

Answers (2)

Ksharma
Ksharma

Reputation: 1

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

Upvotes: 0

hamed
hamed

Reputation: 8033

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.
 });

Upvotes: 4

Related Questions