鼠标悬停时发送 ajax 请求

Question

我有一组具有相同 class 选择器的元素。当我在此元素上输入鼠标时，我想发送 Ajax 查询，但是。当我只是 console.log(1); 在鼠标上输入时一切正常，但是当我发送请求时它会逐渐增加，并且每次下一次悬停都会发送很多请求而不是一个。这是我的代码：

$(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);
                }
            });
        });
    });
});

有人可以帮助我吗？也许我做错了什么？

Answer 1

我认为最好的方法是使用 hover 事件发送 ajax 请求。这只会发送一次。

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

Answer 2

您可以使用 onmouseenter 和 onmouseleave 事件来仅调用一次，而不是使用悬停事件。

鼠标悬停时发送 ajax 请求

Send ajax request on mouseover

javascript

jquery

ajax

mouseevent