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

這個文檔片斷用於我這樣另一頁：由於我的網站使用了AJAX請求

<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> 

我使用.live方法在第一個片段中，但是當我加載頁面時，效果不會應用到按鈕/輸入...標記。

如果我刪除.live方法並使用「正常」方式，則會應用在第一個剪切片段中定義的UI效果，但僅應用在任何AJAX請求之前加載的元素。在ajax請求之後加載的元素不受第一個片段的影響（儘管它們具有相同的選擇器）。

感謝您的幫助。

Answer 1

總之，你不能使用.live()這個樣子，這有遵循某種選擇的基礎，這是from the .live() docs：

DOM遍歷方法不完全支持尋找元素髮送到.live()。相反，應該總是在選擇器之後直接調用.live()方法，如上例所示。

你代表的是一個特定的DOM元素一個jQuery對象上調用.live()，而不是你需要得到.selector插件上運行，如果有一個，不能保證這一點，當然，再使用是爲.live，像這樣：

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

如果你想想看，怎麼做.live()工作？它監聽事件冒泡，檢查目標是否匹配選擇器，並執行，如果是這樣（並在一個上下文中，這是一個其他的討論）...如果你做$(DOMElement).live()，它檢查是否選擇它是否它應該執行？

我想你可以根據內部元素的UUID這個應該工作爭辯，但話又說回來，這只是一個.bind()，這將是減少浪費，所以.live()不會做這樣的事情。

---

更新：因爲我很好奇，以實現此不重複的代碼最簡單的方法，這裏是你的插件，選擇.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") 

OR

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