jQuery .live() не работает

Question

моя фактическая проблема в том, что .live() метод jQuery не работает.

Это си код, где я использую его:

jQuery.fn.sb_animateMenuItem = function() 
    { 
    var mousehoverColor = '#0089F7'; 
    var duration = 250; 

    return this.each(function() 
    { 
     var originalColor = $(this).css('background-color'); 
     $(this).live('mouseover', function() 
     { 
      this.style.cursor = 'pointer'; 
      $(this).animate().stop(); 
      $(this).animate(
      { 
       backgroundColor: mousehoverColor 
      }, duration); 
     }); 
     $(this).live('mouseout', function() 
     { 
      this.style.cursor = 'default'; 
      $(this).animate(
      { 
       backgroundColor: originalColor 
      }, duration); 
     }); 
    }); 
}; 

Это отрезало используются I другой страницы таким образом:

<script type="text/javascript" src="ui/js/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="ui/js/jquery-ui-1.8.1.custom.min.js"></script> 
<script type="text/javascript" src="ui/js/color.js"></script> 
<script type="text/javascript" src="engine/js/tiny_mce/tiny_mce.js"></script> 
<script type="text/javascript" src="ui/js/ui.js"></script> 
<script type="text/javascript"> 
    // UI effects 
    $(document).ready(function() 
    { 
     $('button').sb_animateButton(); 
     $('input').sb_animateInput(); 
     $('.top_menu_item').sb_animateMenuItem(); 
     $('.top_menu_item_right').sb_animateMenuItem(); 
     $('.left_menu_item').sb_animateMenuItem(); 
    }); 
</script> 

Поскольку мой сайт использует AJAX запросы я использовал метод .live в первом фрагменте, но когда я загружаю страницу, эффекты не применяются к тегам кнопки/ввода ....

Если я удаляю метод .live и использую «обычный» способ, применяются эффекты ui, определенные в первом отрезке, а только элементы, загруженные до любого запроса AJAX. Элементы, загруженные после запроса ajax, не зависят от первого фрагмента (хотя они имеют один и тот же селектор).

Спасибо за помощь.

Answer 1

Короче говоря, вы не можете использовать .live(), как это, он имеет следовать селектор базы какой-то, это from the .live() docs: методы обхода

DOM не полностью поддерживаются для нахождения элементов в отправьте на адрес .live(). Скорее, метод .live() всегда следует вызывать непосредственно после селектора, как в примере выше.

Вы звоните .live() на объект JQuery, представляющий определенный элемент DOM, вместо этого вы должны получить .selector плагины, работающие на, если есть один, это не гарантировано, конечно, а затем использовать что для .live, как это:

jQuery.fn.sb_animateMenuItem = function() { 
    $(this.selector).live(.....) 

Если вы думаете об этом, как делает .live() работу? Он прослушивает событие для пузырьков, проверяет, соответствует ли цель селектору и выполняется, если это так (и в контексте это еще одно обсуждение) ... если вы сделали $(DOMElement).live(), какой селектор проверяет, должен выполнить?

Я думаю, вы могли бы утверждать, на основе внутреннего элемента UUID это должен работы, но затем снова это просто .bind(), который был бы менее расточительным, так .live() ничего подобного не делает.

---

Update: Потому что мне было интересно о простом способе реализовать это без повторения кода, вот версия вашего плагина, который выбирает .live() или .bind() динамически, на основании, если есть селектор присутствует для .live() в использование:

jQuery.fn.sb_animateMenuItem = function() { 
    var mousehoverColor = '#0089F7'; 
    var duration = 250; 
    var method = this.selector ? jQuery.fn.live : jQuery.fn.bind; 
    method.apply(this, ['mouseover', function() { 
    if(!jQuery.data(this, 'oColor')) 
     jQuery.data(this, 'oColor', jQuery(this).css('background-color')); 
    jQuery(this).stop(true).animate({ backgroundColor:mousehoverColor }, duration); 
    }]); 
    method.apply(this, ['mouseout', function() { 
    jQuery(this).animate({ backgroundColor:jQuery.data(this, 'oColor') }, duration); 
    }]); 
    return this.css('cursor', 'pointer'); 
}; 

You can view a working demo showing both here.

Answer 2

вы можете использовать .DELEGATE() вместо .LIVE, .ON,.BIND

как

$("body").DELEGATE($(this),"click","myfunction") 

ИЛИ

$("body").DELEGATE($(this),"click",function() { 
///code here 
})