Question

有一个很棒的tutorial on IBM's website使用jQuery，PHP和Ajax向我走过一个简单的搜索/结果列表。

我能够使它工作，而且非常酷。

一个问题。我希望结果是超链接，我不能在结果上运行任何java脚本。

以下是我的脚本（包括教程中的内容以及删除超链接所需的附加脚本，单击行为）：

<script type='text/javascript'>
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
$("a").click(ClickInterceptor);
});

function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("./find.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}

function ClickInterceptor(e)
{
window.alert("Hellow World!");
return false;
}
</script>

如果我将以下html放在<body>标记下：

<a href="test">this will work</a>

这将显示警告窗口。

但是，如果我将结果更改为超链接（在教程中 find.php，清单7 中找到）：

$string .= "<a href=\"test\">".$row->name."</a> - ";

它不起作用。

有关如何解决这个问题的想法吗？

Answer 1

click函数在运行时绑定。您需要将其更改为live binding。

$("a").live("click", ClickInterceptor);

或者您可以在更新搜索结果时通过在$("#search_results").html(data)之后添加以下内容来绑定它：

$("#search_results a").click(ClickInterceptor);

Answer 2

实际上问题非常简单，$("a").click(ClickInterceptor);只会查找DOM中当前存在的项目。您需要做的就是将该行更改为：

$("a").live("click", ClickInterceptor);

我还建议您花时间阅读有关jQuery's Events/live的更多信息。

jQuery，php和Ajax问题：无法使动态链接加载动态内容

2 个答案: