Question

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

indivully这两个代码工作正常，因此在serprate页面上的jquery自动完成只是从数据库加载文本enterys。并且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上绑定一个click函数。在您的代码中，单击事件绑定时没有“记录”。所以你需要这样的东西：

<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事件的绑定，它适用于我，尝试一下。它显示了点击和动画启动时的详细信息

Jquery Slider和Jquery自动完成

1 个答案: