0

我一直在使用 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>';
}
}
?>

任何帮助将不胜感激

4

1 回答 1

0

我认为您需要在通过 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 事件的绑定，它适用于我，试试吧。它在单击和动画启动时显示详细信息

于 2012-09-07T05:48:33.003 回答