Jquery Slider 和 Jquery 自动完成

Question

我一直在使用 jquery 自动完成功能在页面上工作，这样当您输入客户端名称时，它会在数据库中搜索包含该短语的任何 macth。所以使用 "LIKE" 。 我还整理了一个 jquery silder，以便它显示从数据库中自动加载的记录，当您单击一个时，它将从数据库中加载更多信息。

这些 2 段代码单独工作正常，因此 serprate 页面上的 jquery 自动完成功能只是从数据库中加载文本输入。 并且 jquery 滑块适用于手动输入的数据和 php 从数据库加载的数据..

但是当我将它们放在一起时，问题是它使用 jquery 滑块的样式在屏幕上显示记录，但是当您单击记录时，它没有显示任何内容，因此没有滑块（atm 只是滑块中的手动 html 数据用于测试)

我尝试了多项测试，例如运行它们 serpeatre，将它们放置在不同的 div 标签中。我已经让它与单个 sql 查询一起工作，但这不是我需要做的，因为我不希望页面需要刷新以加载数据。

我已经从两个文件中放置了我的代码，所以第一个是调用 ajax 请求来创建记录的。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
    $(".recordrow").click(function() {
        var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
        $("#"+divid).show().animate({ "right": '0%'}); //Bring the div from right to left with 200px padding from the screen
    });

    $('#bt-close').click(function(){
     $('.details').animate({right:-2000}, 500);

    });

    });


    function getStates(value){

    $.post("sql.php",{partialState:value},function(data){
    $("#results").html(data);
    });
    }
    </script> 

    <input type="text" onkeyup="getStates(this.value)"/>
    <br />
    <div id="results">

    </div>

这是查询数据库的页面

<?php 
if($_POST['partialState']){
mysql_connect("localhost","root")or die (mysql_error());
mysql_select_db("ict_devices") or die (mysql_error());

$test=$_POST['partialState'];
$text="... More details of the records";

$states = mysql_query("Select * from students Where FirstName LIKE '%$test%'");

while($state= mysql_fetch_array($states)){
echo '<div class="recordrow" id="row-$state["id"]">'.$state['FirstName'].'</div>';
echo '<div class="details" id="details-$state["id"]">'.$text.'<a href="#" id="bt-close">Close</a></div>';
}
}
?>

任何帮助将不胜感激

Answer 1

我认为您需要在通过 ajax 获得“recordrow” div 后绑定点击功能。在您的代码中，点击事件绑定时没有“记录行”。所以你需要这样的东西：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    function getStates(value){
        $.post("sql.php", function(data){
            $("#results").html(data);
            $('.recordrow').each(function() {
               $(this).bind('click', function() {
                   var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
                   $("#"+divid).show().animate({ "right": '0%'}); //Bring the div from right to left with 200px padding from the screen
               });
            });
            $('#bt-close').each(function() {
                $(this).bind('click', function(){
                    $('.details').animate({right:-2000}, 500);
                });

            });
        });
    }
</script>

您的 ajax 是正确的，当您在 DOM 中测试滑块记录行时，单击正确绑定。这就是为什么它按部分工作的原因

编辑：我测试了我的代码并添加了 bt-close 事件的绑定，它对我有用，试试吧。单击和动画启动时会显示详细信息