Question

大家好，我把我的代码放进去，只是简单地解释一下我想做什么。我有一个“实时搜索”页面，如果用户键入“A”，则显示其中包含A的所有结果，如果“AB”则显示所有具有AB的结果。

我所做的是每个结果旁边都会出现按钮，这样当我点击一个特定的按钮时，会运行另一个页面并在右侧显示一些内容。我试图通过ajax这样做，但它只是不工作！最后，在右侧我将从我的SQL数据库中获取数据，但现在我只是试图显示基本的html。有人可以帮忙吗？

实时搜索页面：

<form name="searching" method="post">
    Search<input type="text" name="search" OnKeyUp="dynamicSearch();">
    <div id="sResults"></div>
</form>

在此之下我有我的“dynamicSearch”脚本，它只是xmlhttp请求，它获取我的searchCars.php并显示数据。

searchCars.php页面（ajax脚本所在的位置）。

echo "<input type='button' class='viewbutton'>" . $row['carName'] . "</a>";
<div id="rightdiv" style="width: 60%; float:right">
</div>

在这个按钮上方，我有SELECT *语句，这就是全部。

此页面上的Ajax脚本：

$( document ).ready(function() {
 $(".viewbutton").each(function(){
 var btn = $(this);

 btn.on("click",function(){
 $("#rightdiv").empty();
 $.post("test.php",
 function(data) {
      $("#rightdiv").append(data);
    }
    );
 });
 });
 });

test.php包含的所有内容是：

<html>
<body>
<h2>test</h2>
</body>
</html>

任何帮助都会很棒，谢谢。

Answer 1

现在看起来你正试图遍历每个附加的按钮并在每个按钮上放置一个点击功能。但是，您不需要执行此操作，这是您的问题所在。完成你想要完成的工作的方式可以像这样工作：

$(document).ready(function(){    
    $(".viewbutton").click(function(){
         //Put your ajax here
    });
});

示例：http://pastebin.com/U029bDed

Answer 2

这一行看起来很可疑：

echo "<input type='button' class='viewbutton'>" . $row['carName'] . "</a>";

<input>未关闭（例如<input />或</input>），并且那里有一些未配对的</a>。这里出了点问题：

您已在该代码之前的某个位置打开了<a>，<input>包裹了<a>或
以前是<a>，但您已将其部分更改为<input>

无论如何，您的浏览器正在尝试修复标记并将其搞砸。作为最终结果，没有.viewbutton元素将事件绑定到或者它不是您期望的元素。

我会尝试这样的事情：

echo "<button type='button' class='viewbutton'>" . $row['carName'] . "</button>";

ajax.click函数没有加载相关页面，按钮根本不起作用

2 个答案: