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方法并使用'normal'方式，则应用第一个剪切中定义的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
} )

jQuery .live（）不起作用

2 个答案: