Question

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

Answer 1

它不起作用，因为当您通过load将它们拉入时，您实际上正在重新创建元素，并且您需要重新绑定事件处理程序。我建议使用jQuery's live binding

Answer 2

而不是这种格式：

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

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

2 个答案: