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

这个片段以这种方式在另一个页面中使用:

<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 traversal methods are not fully supported for finding elements to send to .live(). Rather, the .live() method should always be called directly after a selector, as in the example above.

您在表示特定 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 .