javascript - otro - Cómo implementar jquery live() en lugar de cada()

jquery on

Question

Hola, he estado intentando que este script http://jsbin.com/ipajo5/ funcione, pero usando .live () en lugar de .each () ya que la tabla html se completa sobre la marcha.

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

});​

Nota. En algunos hilos, se recomienda utilizar delegate () en lugar de live () para el rendimiento, pero después de muchos días solo quiero que este popup / tooltip funcione.

Gracias.

Answer 1

Reemplazar ".each ()" con ".live ()" tiene muy poco sentido. La función ".each ()" se proporciona para iterar sobre partes del DOM que han sido emparejadas por un selector, o de otra manera para iterar funcionalmente a través de los constituyentes de un objeto jQuery.

Todo lo que ".live ()" puede hacer es ayudar con el manejo de eventos. Si necesita hacer otras cosas en partes de su página, ya que se cargan dinámicamente, tendrá que armar eso en los manejadores de "éxito" para actualizaciones dinámicas, o alguna otra cosa similar.

Answer 2

En realidad no necesitas cambiar nada. Tengo una función similar, pero un poco más extendida. Solo elimínalo de la función document.ready. Eso sí, es mejor utilizar delegate () en lugar de live (). Debido al burbujeo Si desea una página completamente automatizada, que se cargue sobre la marcha, eche un vistazo a jaltiere.com

Pero necesitará reescribir completamente su script. Además, tanto live () como delegate () son difíciles de configurar con eventos mouseover y mouseout.

No hay almacenamiento en caché en el documento. Listo:

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

En la carga de la página, haz tu llamada ajax y llama a tu script como una función separada:

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

Función separada para una actualización:

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

Y ahora tu guion. Cambié tu mouseover y mouseout para mouseenter y mouseleave. Funcionan un poco mejor.

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

Si desea actualizar, simplemente ponga esto en su cuerpo, o cámbielo para llamar a la función ajaxcall:

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