如何仅在onmouseover上触发AJAX请求

Question

I have below script which shows values from search page onmouseover.

<script type="text/javascript">
    function preview(val) {
      $.ajax({
        type: "POST",
        url: "search.php",
        data:'id='+val,
        success: function(data){
            $(".ress").html(data);
        }
    });
   }
 </script>

html :

<div class="CVSearchResult" onmouseover="preview('1')">

search :

<?php echo $_POST['id']; ?> 

output for class .ress :

1

However I want to hide the output onmouseout as well. How can I do this? I mean just trigger the AJAX for mouse hover and hide if not hover.

Answer 1

<div class="CVSearchResult" onmouseover="preview('1')" onmouseout="hide()">
<script>
function hide() {
    $(".ress").html('');
} 
</script>

You are adding event handler when user move the mouse away from the element to trigger hide function.

The hude function grab the result dom element(which can contain selected results from previous calls) and set the html to empty string.

That way when you move away with the mouse the div element is cleared.