代码之家  ›  专栏  ›  技术社区  ›  Jarsen

通过jquery ajax拉入的内容与以前的函数不关联

  •  0
  • Jarsen  · 技术社区  · 14 年前

    我正在使用jquery .load() 函数以拉入数据来填充DIV。我拉入的内容有CSS选择器,它们应该与我编写的jquery click函数相匹配。但是,当我加载数据时,尽管有正确的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 回复  |  直到 14 年前
        1
  •  1
  •   Nick Craver    14 年前

    而不是这种格式:

    $(".ajax_node").click(function() {
    

    使用 .live() 对于当前和未来的元素,如下所示:

    $(".ajax_node").live('click', function() {
    

    原因何在: LIVER() 侦听在dom根目录下冒泡的事件,或者 document . 它是绑定在那里的单个事件处理程序……添加元素时不重要,它们都在 click 同样,当单击到达那里时:它检查选择器,如果它匹配,则运行处理程序。

    当前方法不起作用的原因:它查找与该选择器匹配的所有元素 那时 并且绑定处理程序…新元素不存在,所以不要获取该处理程序。你有两个选择来解决这个问题,要么使用 LIVER() 它以不同的方式工作,如上所述,或者将处理程序重新绑定到请求内容中的选择器,如下所示:

    function callback(data) { //your success callback, e.g. .load(url, callback)
      $(".ajax_node", data).click(myFunction);
    }
    

    就你而言,我想 LIVER() 更简单的是,您通常使用小部件和类似的,而不是严格的事件处理程序来做第二件事……但是无论什么东西可以让您的船漂浮。

        2
  •  4
  •   Levi Hackwith    14 年前

    它不起作用,因为当您通过 load 您需要重新绑定事件处理程序。我建议使用 jQuery's live binding