.live()或.livequery()

Question

我有一个使用Ajax的网站，Ajax内容来自其他页面，例如about.html，contact.html。 Ajax从名为#main-content的div中获取内容。但是在Ajax调用之后，我的其余脚本会出现问题，例如tinyscrollbar()插件和一些其他自定义函数。

我搜索了大约4天，并发现我的问题是AJAX请求更改了DOM，因此在加载之前加载的脚本在Ajax调用后不运行。

如果我是对的，我需要什么来解决这个问题？.live()或.livequery()插件？

我使用的所有JS都在这里：

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;  

  });

- nowayyy

---

通常情况下，您应该优先选择使用.delegate()而不是.live()，因为它的性能更好。此外，我认为现在.live或delegate可以做的事情livequery也不能做太多。 - Robin

Answer 1

对于插件，没有特别的。你可以在$.load的完成回调中重新初始化你的插件：

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

对于事件处理程序，您可以在回调函数中重新绑定它们，就像上面的示例一样，或者使用.live或.delegate（您似乎已经在使用）来确保绑定持续存在于未来（ajax 替换）元素，例如：

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

或者：

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

- karim79

---

@Trippy - complete 回调函数会在响应被插入到 DOM 中后触发。你可以直接在其中的元素上调用插件 - 这样每次你替换容器中的元素时，就会立即将插件/事件处理程序附加到它们上面。试一下吧 :) - karim79

好的，我可以调用插件，那其他的如$('.projects dl dt').hover(function(){...});呢？ - nowayyy

好的，我现在有点明白了。你能解释一下我应该在第一个和第二个function()中放什么吗？ function() { 这里应该放什么？ }, function() { 还有这里呢？ });抱歉，我对ajax和这些东西还不太熟悉。 - nowayyy

@Trippy - 从你的评论中，我认为你已经有了一个.hover处理程序 :) 第一个函数处理mouseenter事件，第二个函数处理mouseleave事件。Hover文档。 - karim79

将事件转换为函数，然后在.load()中调用它是否有意义？例如：$('#main-content').load(toLoad, function(){ defbox(); });。 - nowayyy