jQuery load data on hover after completing search
<p><strong>Problem</strong></p>

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

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

}
</code></pre>

<p>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.</p>

<p>That's what I've done:</p>

<p>For the hover:</p>

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

<p>The PHP:</p>

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

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

    }
}
</code></pre>

<p>But nothing happens on hover!</p>

<p><strong>Question</strong></p>

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

<blockquote>
  <p>Additional</p>
</blockquote>

<p><strong>Full jquery code:</strong></p>

<pre><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('&lt;img src="http://i.imgur.com/ZoI4x5I.gif" /&gt;');
}
function stop_load(){
    $('.load').html('');
}   
});
</code></pre>

<p><strong>Full PHP code:</strong></p>

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

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

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

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

    }
}
</code></pre>

<p>Thanks!</p>
