Question

我有一个实时搜索栏，如果用户输入“M”只显示有M的结果，依此类推，我将每个结果都设为一个链接，这样当用户点击它时，它会加载到另一页。

现在，我可以将它加载到另一个页面，但是我正在尝试在同一页面上执行它但它不会工作。

搜索代码只是一个采用文本的表单，然后使用xmlhttp方法使其生效。

现在，显示它如下:(我已经给它一个在ajax中使用的类）

echo "<a href = 'display.php' class='display'>" . $row['carName'] . "</a>";

的Ajax：

$(document).ready(function() {
    $(".display").each(function(){
        var btn = $(this);
        btn.on("click",function(){
            $("#displayDiv").empty();
            $.post("display.php",function(data) {
                $("#displayDiv").append(data);

有任何帮助吗？目前，点击它只是加载test.php，我有一些文本，看它的工作情况。我试图让它在右边动态加载。

感谢。

编辑：它加载test.php，即：

<html>
    <body>    
        <div id="displayDiv">    
            <h2> Test </h2>
        </div>    
    </body>
</html>

EDIT2：与脚本位于同一页面的div id：

<html>

<div id="displayDiv" style="width: 40%; float:right">


</div>

Answer 1

点击它时，它只是跟随链接。要停止此操作，您需要将事件处理程序更改为：

btn.on("click",function(e){
    e.preventDefault();
    // rest of your code
});

Answer 2

$(document).ready(function() {
    $(".display").on("click", function(e) {
        $("#displayDiv").empty();
        $.post("display.php", function(data) {
                $("#displayDiv").append(data);
            }
        );
        e.preventDefault();
    });
});

似乎无法让这个ajax代码工作？不会“动态”显示

2 个答案: