如何实现jquery live（）而不是每个（）

Question

您好我一直在试图让这个脚本http://jsbin.com/ipajo5/工作，但使用.live（），而不是.each（），因为html表中填写动态。

$(document).ready(function() { 

    $('.bi').each(function() { 
    // options 
    var distance = 10; 
    var time = 250; 
    var hideDelay = 500; 

    var hideDelayTimer = null; 

    var beingShown = false; 
    var shown = false; 

    var trigger = $('.tt', this); 
    var popup = $('.popup', this).css('opacity', 0); 

    // set the mouseover and mouseout on both element 
    $([trigger.get(0), popup.get(0)]).mouseover(function() { 
     if (hideDelayTimer) clearTimeout(hideDelayTimer); 

     if (beingShown || shown) { 
     return; 
     } else { 
     beingShown = true;  
     popup.css({ 
      top: $(this).position().top-150, 
      left: $(this).position().left-100, 
      display: 'block' 
     }) 
     .animate({ 
      top: '-=' + distance + 'px', 
      opacity: 1 
     }, time, 'swing', function() { 
      beingShown = false; 
      shown = true; 
     }); 
     } 
    }).mouseout(function() { 
     if (hideDelayTimer) clearTimeout(hideDelayTimer); 

     hideDelayTimer = setTimeout(function() { 
     hideDelayTimer = null; 
     popup.animate({ 
      top: '-=' + distance + 'px', 
      opacity: 0 
     }, time, 'swing', function() { 
      shown = false; 
      popup.css('display', 'none'); 
     }); 
     }, hideDelay); 
    }); 
    }); 

});​ 

注意。在一些线程中，推荐使用delegate（）来代替live（）来实现性能，但是在很多天之后，我只想让这个popup/tooltip工作。

谢谢。

Answer 1

你其实不需要改变任何东西。我有一个类似的功能，但稍微扩展一点。只需从document.ready函数中删除它即可。 请注意，您最好使用delegate（）而不是live（）。由于冒泡。如果您想要一个完全自动化的页面，即可立即上传，请参阅jaltiere.com

但是您需要完全重写脚本。此外，live（）和delegate（）很难通过鼠标悬停和鼠标事件进行设置。

没有缓存中的document.ready：

$(document).ready(function() { 
      $.ajaxSetup({ cache: false });}); 

在页面加载，做您的AJAX呼叫和呼叫脚本作为一个单独的功能：

$(function() { 
$.get("ajaxpage.php", function(data) { 
    $("#recent").html(data); 
    bifunct(); 
});}); 

单独功能的更新：

function ajaxcall(){ 
$.get("ajaxpage.php?", function(data) { 
    $("#recent").html(data); 
    bifunct(); 
});}; 

现在你的脚本。我已将mouseover和mouseout更改为mouseenter和mouseleave。他们的工作稍好一些。

bifunct = function(){ 
$('.bi').each(function() { 
    // options 
    var distance = 10; 
    var time = 250; 
    var hideDelay = 500; 
    var hideDelayTimer = null; 
    var beingShown = false; 
    var shown = false; 
    var trigger = $('.tt', this); 
    var popup = $('.popup', this).css('opacity', 0); 

    // set the mouseover and mouseout on both element 
    $([trigger.get(0), popup.get(0)]).mouseenter(function() { 
     if (hideDelayTimer) clearTimeout(hideDelayTimer); 
     if (beingShown || shown) { 
      return; 
     } else { 
      beingShown = true;  
      popup.css({ 
       top: $(this).position().top-150, 
       left: $(this).position().left-100, 
       display: 'block' 
      }) 
      .animate({ 
       top: '-=' + distance + 'px', 
       opacity: 1 
      }, time, 'swing', function() { 
       beingShown = false; 
       shown = true; 
      }); 
     } 
    }).mouseleave(function() { 
     if (hideDelayTimer) clearTimeout(hideDelayTimer); 
     hideDelayTimer = setTimeout(function() { 
      hideDelayTimer = null; 
      popup.animate({ 
       top: '-=' + distance + 'px', 
       opacity: 0 
      }, time, 'swing', function() { 
       shown = false; 
       popup.css('display', 'none'); 
      }); 
     }, hideDelay); 
    }); 
});} 

如果要更新，简单地把这个在你的身上，或者将其更改为调用AjaxCall的功能：

<a onclick="ajaxcall();return false" href="#"> update </a> 

Answer 2

用“.live（）”代替“.each（）”意义不大。提供“.each（）”工具来遍历已经被选择器匹配的DOM部分，或者以其他方式遍历功能性地遍历jQuery对象的组成部分。

“.live（）”所能做的就是帮助处理事件。如果您需要在页面的某些部分进行动态加载时执行其他操作，则必须将它们放在“成功”处理程序中进行动态更新或其他类似的操作。