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

这个snipped用于我的另一个页面:

<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方法并使用'normal'方式,则应用第一个剪切中定义的ui效果,但仅应用在任何AJAX请求之前加载的元素.在ajax请求之后加载的元素不受第一个片段的影响(尽管它们具有相同的选择器).

谢谢你的帮助.

Answer 1

简而言之,你不能这样使用.live(),它必须遵循某种选择器基础,这是来自.live()文档:

查找要发送的元素不完全支持DOM遍历方法.live().相反,.live()应始终在选择器之后直接调用该方法,如上例所示.

你调用.live()代表一个特定的DOM元素的jQuery对象上,而不是你需要得到的.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');
};

您可以在此处查看显示两者的工作演示.

Answer 2

您可以使用.DELEGATE()而不是.LIVE,.ON,.BIND

喜欢

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

要么

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