jQuery的滑塊和jQuery自動完成

Question

我一直在一個頁面上使用一個jQuery自動完成，這樣當你在客戶輸入其名字搜索數據庫，包含這個詞組的任何macth。所以使用「LIKE」。 我也放在一起jquery silder，以便它顯示從數據庫中自動加載的記錄，當你點擊一個它會從數據庫加載更多的信息.​​.

indivaully thesse 2段代碼工作正常所以在一個serprate頁面上的jquery自動完成只是從數據庫中加載文本輸入。 和jQuery的滑塊工作正常，手動輸入的數據和數據從PHP數據庫加載的數據..

但當我把它們放在一起的問題是它顯示在屏幕上的記錄與jquery滑塊的樣式，但是當ü點擊記錄它沒有顯示任何東西，所以沒有滑塊（atm只是手動html數據在滑塊中進行測試）

我已經嘗試了多種測試，如運行它們s​​erpeatre，將它們放在不同的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> 

這是querys數據庫的頁面

<?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>'; 
} 
} 
?> 

任何幫助將大大approgated

Answer 1

我認爲你需要綁定「recordrow」div後，通過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 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關閉事件，它爲我工作，嘗試它。它顯示詳細信息點擊，動畫推出