.live（）或.livequery（） [英] .live() or .livequery()

问题描述

我有一个网站，是Ajaxed，内容是Ajax是从其他网页，如about.html，contact.html。阿贾克斯越来越从一个div内容称为＃主要内容。但AJAX调用后，我的剧本休息时间。如tinyscrollbar（）插件和其他一些自定义的功能。

我搜索了大约4天，发现我的问题是AJAX请求改变DOM，而且由于之前加载脚本，它Ajax调用后不运行。

如果我是对的，那么我需要解决这一问题？ .live（）或.livequery（）插件？

所有我现在用的JS是这样的：

 变量$ DD = $（'。项目DL）找到（DD），$ defBox = $（'＃高清盒子）。

  $ defBox.hide（）;
  $（'项目'）。悬停（函数（）{
    $ defBox.stop（真，真）
      .fadeToggle（1000）
      html的（'＆LT; P＆GT;悬停的链接，看到一个描述＆LT; / P＆GT;'）;
  }）;

  $ dd.hide（）;
  $（'。项目DL DT'）。悬停（函数（）{
    变量$数据= $（本）。接下来（DD）HTML（）。
    $ defBox.html（$的数据）;
    }）;

  //阿贾克斯的东西
  //为您在URL散列值
  变种散列= window.location.hash.substr（1）;

  //检查，以确保与HREF链接==哈希在页面上
  如果（$（'一[HREF =+散+']）。长）{
    //加载页面。
    VAR toLoad =散+'的.php＃主要内容;
    $（'＃主要内容）的负载（toLoad）;
  }

  $（NAV UL李一）。点击（函数（）{
    VAR goingTo = $（本）.attr（HREF'）;
    goingTo = goingTo.substring（goingTo.lastIndexOf（'/'）+ 1）;
    如果（window.location.hash.substring（1）=== goingTo）返回false;

    VAR toLoad = $（本）.attr（HREF'）+'＃主要内容，
    $内容= $（'＃主要内容），$ loadimg = $（'＃负载'）;

    $ content.fadeOut（快，loadContent）;
      $ loadimg.remove（）;
      $ content.append（'＆LT;跨度ID =负荷＆GT;＆LT; / SPAN＆GT;'）;
      $ loadimg.fadeIn（慢）;
    window.location.hash = goingTo;

    功能loadContent（）{
        $ content.load（toLoad，''，showNewContent）
    }
    功能showNewContent（）{
        $ content.fadeIn（快，hideLoader）;
    }
    功能hideLoader（）{
        $ loadimg.fadeOut（'快'）;
    }
    返回false;

  }）;
 

解决方案

有关插件，无论是真的。你可以简单地在 $重新初始化你的插件加载的全面回调：

  $（'＃主要内容）。载荷（toLoad，函数（）{
    $（＃富）tinyscrollbar（）。
    $（＃条）facebox（）。
    // 等等
}）;
 

有关事件处理程序，可以在回调中重新绑定他们在上面的例子中，或使用 .live 或 .delegate （您已经似乎可以用），以确保结合持续未来（Ajax的替换）元件，例如：

  $（'。项目DL）。代表（DT，悬停，函数（）{
   ...
}， 功能（） {
    ...
}）;
 

或

  $（'。项目DL DT'）。住（悬停，函数（）{
   ...
}， 功能（） {
    ...
}）;
 

I have a site that is Ajaxed, content that is Ajax is from other pages, such as about.html, contact.html. The ajax is getting the content from a div called #main-content. But after the ajax call, rest of my scripts break. Such as the tinyscrollbar() plugin and some other custom functions.

I searched for about 4 days and found out that my problem was the AJAX request changing the DOM, and since scripts being loaded before that, it doesn't run after the ajax call.

If i'm right, what would I need to fix this? .live() or the .livequery() plugin?

All the JS I am using is in this:

var $dd = $('.projects dl').find('dd'), $defBox = $('#def-box');

  $defBox.hide();
  $('.projects').hover(function(){
    $defBox.stop(true, true)
      .fadeToggle(1000)
      .html('<p>Hover The links to see a description</p>');
  });

  $dd.hide();
  $('.projects dl dt').hover(function(){
    var $data = $(this).next('dd').html();
    $defBox.html($data);
    }); 

  // Ajax Stuff 
  // Check for hash value in URL  
  var hash = window.location.hash.substr(1);

  //  Check to ensure that a link with href == hash is on the page  
  if ($('a[href="' + hash + '"]').length) {
    //  Load the page.
    var toLoad = hash + '.php #main-content';
    $('#main-content').load(toLoad);
  }

  $("nav ul li a").click(function(){
    var goingTo = $(this).attr('href');
    goingTo = goingTo.substring(goingTo.lastIndexOf('/') + 1);
    if (window.location.hash.substring(1) === goingTo) return false;

    var toLoad = $(this).attr('href')+' #main-content',
    $content = $('#main-content'), $loadimg = $('#load');

    $content.fadeOut('fast',loadContent);  
      $loadimg.remove();  
      $content.append('<span id="load"></span>');  
      $loadimg.fadeIn('slow');  
    window.location.hash = goingTo;

    function loadContent() {  
        $content.load(toLoad,'',showNewContent)  
    }  
    function showNewContent() {  
        $content.fadeIn('fast',hideLoader);  
    }  
    function hideLoader() {  
        $loadimg.fadeOut('fast');  
    }  
    return false;  

  });

解决方案

For plugins, neither really. You can simply re-init your plugins within $.load's complete callback:

$('#main-content').load(toLoad, function() {
    $("#foo").tinyscrollbar();
    $("#bar").facebox();
    // etc
});

For event handlers, you can rebind them within the callback as in the above example, or use .live or .delegate (which you already seem to be using) to ensure that the binding persists for future (ajax-replaced) elements, e.g.:

$('.projects dl').delegate("dt", "hover", function() {
   ...
}, function() {
    ...
});

or:

$('.projects dl dt').live("hover", function() {
   ...
}, function() {
    ...
});

这篇关于.live（）或.livequery（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！