我正在使用jQuery .load()
函数来提取数据以填充div。我所引入的内容有CSS选择器,应该与我编写的jQuery单击函数相匹配。但是,当我加载数据时,尽管有正确的CSS选择器,当我点击应该从jQuery调用响应的区域时,没有任何反应。
我是否需要进行某种重装?
这是我为jQuery AJAX提供的代码:
$(document).ready(function() {
// AJAX functionality for drupal nodes
$(".ajax_node").click(function() {
var ajax_src = $(this).attr("href"); // we're gonna load the href
// empty target div and load in content
// the space in the string before the #id is necessary
$("#ajax_area").empty().load(ajax_src + " #ajax_wrapper");
return false; // stops the link from following through
});
// General AJAX functionality
$(".ajax").click(function() {
var ajax_src = $(this).attr("href");
$("#ajax_area").empty().load(ajax_src);
return false;
});
});
答案 0 :(得分:4)
它不起作用,因为当您通过load
将它们拉入时,您实际上正在重新创建元素,并且您需要重新绑定事件处理程序。我建议使用jQuery's live binding
答案 1 :(得分:1)
而不是这种格式:
$(".ajax_node").click(function() {
将.live()
用于当前和未来的元素,如下所示:
$(".ajax_node").live('click', function() {
原因:.live()
侦听事件在DOM根目录上冒泡,或document
。它是绑定在那里的单个事件处理程序...当添加一个元素时它们都无关紧要,当点击到达时它们都会使click
同样冒泡:它检查选择器,如果它匹配则运行处理程序。
为什么你当前的方法不起作用:它找到了那个与那个选择器匹配的所有元素并绑定了处理程序...新元素不存在,所以不要得到那个处理程序您有2个选项可以解决这个问题,使用.live()
以不同的方式工作,如上所述,或者将处理程序重新绑定到请求内容中的那个选择器,如下所示:
function callback(data) { //your success callback, e.g. .load(url, callback)
$(".ajax_node", data).click(myFunction);
}
在你的情况下,我认为.live()
要容易得多,你通常用小部件来做第二次,而不是严格的事件处理程序...但无论什么漂浮你的船。