Как реализовать jquery live () вместо каждого () - PullRequest
Новая
       10

Как реализовать jquery live () вместо каждого ()

2 голосов
/ 24 января 2011

Привет! Я пытался заставить этот скрипт работать 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);
    });
  });

});​

Заметка.В некоторых потоках рекомендуется использовать делегат () вместо live () для производительности, но по прошествии многих дней я хочу, чтобы это всплывающее окно / всплывающая подсказка работали.

Спасибо.

Ответы [ 2 ]

5 голосов
/ 24 января 2011

Замена ".each ()" на ".live ()" не имеет большого смысла.Средство «.each ()» предназначено для итерации по частям DOM, которые были сопоставлены селектором, или иным образом для функциональной итерации по составляющим объекта jQuery.) "можно сделать, это помочь с обработкой событий.Если вам нужно выполнять другие действия с частями вашей страницы, когда они загружаются динамически, вам придется объединить их вместе в обработчиках «успеха» для динамических обновлений или других подобных вещах.

2 голосов
/ 25 января 2011

На самом деле вам не нужно ничего менять.У меня похожая функция, но чуть более расширенная.Просто удалите его из функции document.ready.Имейте в виду, вам лучше использовать делегат () вместо live ().Из-за пузырей.Если вы хотите полностью автоматизированную страницу, которая загружается на лету, взгляните на jaltiere.com

Но вам нужно будет полностью переписать ваш скрипт.Кроме того, и live (), и делегат () сложно настроить с помощью событий mouseover и mouseout.

Кэширование в документе отсутствует.Отдельная функция для обновления: 

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

А теперь твой скрипт.Я поменял мышку и мышку на 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>
...