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

时间:2013-04-12 21:34:24

标签: php jquery

问题

您好,我有一个使用Jquery POST和PHP的简单搜索系统。 搜索后,它将回显如下信息:

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 />
';

}

我希望当你将ID悬停在“悬停”(搜索之后)时,java脚本会用数据填充一些div,它会发送另一个POST来获取数据。

这就是我所做的:

悬停:

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

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 />
        ';

    }
}

但悬停时没有任何事情发生!

问题

我做错了什么?为什么它不会在悬停时做任何事情?我可以使用脚本运行后回显的ID吗?

  

其他

完整的jquery代码:

$(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('');
}   
});

完整的PHP代码:

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 />
        ';

    }
}

谢谢!

1 个答案:

答案 0 :(得分:1)

试试这个..动态添加<a href="#" id="hover">

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