How to implement jquery live() instead of each()

Hi I have been trying to get this script http://jsbin.com/ipajo5/ working but using .live() instead of .each() since the html table is populated on the fly.

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

});​

Note. In some threads it is recomended to use delegate() instead live() for performance, but after many days I only want this popup/tooltip to work.

Thank you.

Replacing ".each()" with ".live()" makes very little sense. The ".each()" facility is provided to iterate over parts of the DOM that have been matched by a selector, or otherwise to iterate functionally through the constituents of a jQuery object.

All that ".live()" can do is help with event handling. If you need to do other things to parts of your page as they're loaded dynamically, you'll have to piece that together yourself in the "success" handlers for dynamic updates, or some other similar thing.

You actually don't need to change anything. I have a similar function, but a little more extended. Just remove it from the document.ready function. Mind you, you are better of using delegate() instead of live(). Due to bubbling. If you want a fully automated page, that is uploaded on the fly take a look at jaltiere.com

But you will need to fully rewrite your script. Besides, both live() and delegate() are difficult to set up with mouseover and mouseout events.

No caching in the document.ready:

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

On page load, do your ajax-call and call your script as a seperate function:

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

Seperate function for an update:

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

And now your script. I've changed your mouseover and mouseout to mouseenter and mouseleave. They work slightly better.

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

If you want to update, simply put this in your body, or change it to call the ajaxcall-function:

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