each（）の代わりにjquery live（）を実装する方法

Question

こんにちは私はこのスクリプトhttp://jsbin.com/ipajo5/を稼働させようとしていますが、htmlテーブルがその場に配置されているので.each（）の代わりに.live（）

$(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); 
    }); 
    }); 

});​ 

注意。いくつかのスレッドでは、パフォーマンスのためにlive（）の代わりにdelegate（）を使用することを推奨していますが、何日もの後、私はこのポップアップ/ツールチップを動作させたいだけです。

ありがとうございます。

Answer 1

実際には何も変更する必要はありません。私は同様の機能を持っていますが、もう少し拡張しました。単にそれをdocument.ready関数から削除してください。 あなたはlive（）の代わりにdelegate（）を使用するほうがよいでしょう。バブリングによる。あなたが完全に自動化されたページを望んでいるなら、それを見てください。jaltiere.com

しかし、スクリプトを完全に書き直す必要があります。さらに、live（）とdelegate（）の両方は、マウスオーバーイベントとmouseoutイベントでセットアップするのが難しいです。

document.readyんのキャッシュ：ページロードで

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

、あなたのAJAX呼び出しを行うと、別々の関数としてスクリプトを呼び出す：

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

洗面所独立機能を更新するために：

これでスクリプトが完成しました。私はあなたのマウスオーバーと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

".each（）"を ".live（）"に置き換えることはほとんど意味がありません。 ".each（）"機能は、セレクタによって一致したDOMの部分を反復するか、またはjQueryオブジェクトの構成要素を機能的に反復するために提供されています。

".live（）"が行うことができるすべては、イベント処理に役立ちます。動的にロードされているときにページの他の部分を行う必要がある場合、ダイナミックな更新や他の同様のもののための "成功"ハンドラでそれをまとめなければなりません。