如何實現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（）」所能做的就是幫助處理事件。如果您需要在頁面的某些部分進行動態加載時執行其他操作，則必須將它們放在「成功」處理程序中進行動態更新或其他類似的操作。