通过jQuery AJAX引入的内容与之前的功能无关

时间:2010-05-11 17:04:46

标签: jquery ajax

我正在使用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;
});
});

2 个答案:

答案 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()要容易得多,你通常用小部件来做第二次,而不是严格的事件处理程序...但无论什么漂浮你的船。