jquery - 停止发布事件请求

Question

我有一个工具提示，其中包含从 ajax 加载的数据：

$('.show_tooltip').hover(
    function(){
        $.post('getdata.php', function(data)    {
            $('#tooltip').html(data);
            $('#tooltip').show()
        });
    },
    function(){
        $('#tooltip').hide(); 
    }
);

有用。
但问题是 - 当我将它悬停在元素上并快速将鼠标移出时，$('#tooltip').show()没有任何效果，它hide()。但是当加载数据时，它会弹出并保持显示而没有任何悬停。

对此可以做些什么。有没有办法完全停止发布请求？

Answer 1

jQuery AJAX 方法返回一个jqXHR对象，它是本机XMLHttpRequest对象的扩展，它有一个abort停止请求的方法：

var xhr;
$('.show_tooltip').hover(
    function(){
        //Save reference to the jqXHR object
        xhr = $.post('getdata.php', function(data) {
            $('#tooltip').html(data);
            $('#tooltip').show()
        });
    },
    function(){
        xhr.abort(); //Abort the request
        $('#tooltip').hide(); 
    }
);

Answer 2

您需要采取.show()AJAX 成功功能。

$('.show_tooltip').hover(
    function(){
        $.ajax({
            type: 'POST',
            url: 'getdata.php',
            asynch
            data: data,
            success: function(){
                $('#tooltip').html(data);
            }
            $('#tooltip').show()
        });
    },
    function(){
        $('#tooltip').hide(); 
    }
);

Answer 3

你可以试试这个：

$('.show_tooltip').hover(
    function(){
        $.post('getdata.php', function(data)    {
            $('#tooltip').html(data);
            $('#tooltip').show()
        });
    }
);
$('#tooltip').bind("mouseleave", function(){
    $(this).hide();
});

Answer 4

这篇文章一次代码event.preventDefault(); 示例：

$("#formName").submit(function(event) {
    event.preventDefault(); // here using code stop post (return false;)
    $.post('processing.php', $("#formName").serialize(), function(result){ $('#LimitlessDiv').html(result); });
});