javascript - jQuery- Inserting GET data into div only works after second trigger

Question

I am trying to use jQuery to fetch data and place it into a div after I hover over a link. It is working, but only on the second hover. The first hover instance does not do anything. Why?

jQuery(document).ready(function($){

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

    var s_href = $(this).attr('href');
    var s_title = $(this).attr('title');

    $(".tiptitle").empty().append(s_title); // Only working after second instance

    var get_url = "/root/data.php"+s_href;

    $.get( get_url, function( data ) {
      var tip_content = data; 
    $("#tipcontent").empty().append(tip_content); // Only working after second instance

});
});

And the HTML:

<a class="tiptrigger" title="My Title" href="?s=something">Hover over me</a>

<div class="tipbox"><p class="tiptitle"></p><p id="tipcontent"></p></div>

And lastly, the PHP page that the GET request is being sent to:

<?php

if ($_GET['s'] == "something") {
  echo "This should appear in the paragraph.";
}

?>

What am I doing wrong here?

Answer 1

为 .hover()的第二个处理程序提供一个空的存根函数handlerOut()，你只是提供一个处理程序，它在越过和离开链接时都会执行，所以这样做：

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

    var s_href = $(this).attr('href');
    var s_title = $(this).attr('title');

    $(".tiptitle").empty().append(s_title); // Only working after second instance

    var get_url = "/root/data.php"+s_href;

    $.get( get_url, function( data ) {
      var tip_content = data; 
    $("#tipcontent").empty().append(tip_content); // Only working after second instance

}
, function() {}); //PROVIDE EMPTY HANDLER FOR MOUSEOUT