完成搜索后，jQuery在悬停时加载数据

Question

Problem

Hello, I have a simple search system using Jquery POST and PHP. After search, it will echo the information like this:

while($row = $search->fetch(PDO::FETCH_ASSOC)) {
echo 
'
<br /><br />
'.$row['result_name'].' <br /> Data: <a href="#" id="hover">Click to see</a><br /><br />
';

}

I want to make so when you hover the ID "hover" (after search), the java script will fill some div with the data, it will send another POST to get the data.

That's what I've done:

For the hover:

$("#hover").hover(function() {
  $.post("ajax_search.php?type=sidebar", { sidebar : seach.val() }, function(get_data) {
stop_load();
$("#sidebar").html(get_data);
     });
}); 

The PHP:

if (isset($_GET['type']) && $_GET['type'] == 'sidebar' && isset($_POST['sidebar'])) 
{
    $data = htmlentities(trim($_POST['search']));
    $similar = "'%$data%'";
    $search = $connect->prepare("SELECT * FROM results WHERE result_name LIKE $similar");
    $search->execute(); 

    while($row = $search->fetch(PDO::FETCH_ASSOC)) {
        echo 
        '
        <br /><br />
        '.$row['result_name'].' <br /> Data: '.$row['rsult_data'].'<br /><br />
        ';

    }
}

But nothing happens on hover!

Question

What have I done wrong? why doesn't it do anything on hover? Can I use IDs that have echoed after the script ran?

Additional

Full jquery code:

$(document).ready(function() {

    var search = $("#search");

        $("#bla").click(function() {
            if (search.val() != '') {
                load();
                $.post("ajax_search.php", { search : search.val()}, function(data) {
                    stop_load();
                    $(".result").html(data);
                });
            } 
            else 
            {
                $(".result").html('');
            }
            $("#hover").hover(function() {
                $.post("ajax_search.php?type=sidebar", { sidebar : seach.val() }, function(get_data) {
                    stop_load();
                    $("#sidebar").html(get_data);
                });
            });                 

function load() {
    $('.load').html('<img src="http://i.imgur.com/ZoI4x5I.gif" />');
}
function stop_load(){
    $('.load').html('');
}   
});

Full PHP code:

if (isset($_POST['search'])) 
{
    $data = htmlentities(trim($_POST['search']));
    $similar = "'%$data%'";
    $search = $connect->prepare("SELECT * FROM results WHERE result_name LIKE $similar");
    $search->execute();

    if ($search->rowCount() == 0) {
        echo 'You searched for <b>'.$data.'</b>, 0 results found.';
    } else {
        $results = $search->rowCount();
        echo 'You searched for <b>'.$data.'</b>, '.$results.' results found.';
        while($row = $search->fetch(PDO::FETCH_ASSOC)) {
            echo 
            '
            <br /><br />
            '.$row['result_name'].' <br /> Data: <a href="#" id="hover">Click to see</a><br /><br />
            ';

        }
    }
}
if (isset($_GET['type']) && $_GET['type'] == 'sidebar' && isset($_POST['sidebar'])) 
{
    $data = htmlentities(trim($_POST['search']));
    $similar = "'%$data%'";
    $search = $connect->prepare("SELECT * FROM results WHERE result_name LIKE $similar");
    $search->execute(); 

    while($row = $search->fetch(PDO::FETCH_ASSOC)) {
        echo 
        '
        <br /><br />
        '.$row['result_name'].' <br /> Data: '.$row['rsult_data'].'<br /><br />
        ';

    }
}

Thanks!

Answer 1

Try this .. as your <a href="#" id="hover"> being added dynamically

$(document).on("mouseenter","#hover",function() {
     $.post("ajax_search.php?type=sidebar", { sidebar : seach.val() }, function(get_data){
                stop_load();
                $("#sidebar").html(get_data);
      });
});