代码之家 › 专栏 › 技术社区 › ddango

jquery.live()事件交互

live internet-explorer-8 jquery

ddango · 技术社区 · 15 年前

假设我有一个场景,我有一个全局插件(或者至少是一个绑定到更广泛事件数组的插件)。

这个插件接受一个选择器,并将一个活动的点击绑定到它。伪jquery中的某些内容可能如下所示:

$.fn.changeSomething = function(){
     $(this).live("change", function(){ alert("yo");});
}

在另一个页面上,我有一个类似这样的附加实时绑定:

$("input[type='checkbox']").live("click", function(){alert("ho");});

在这个场景中,复选框理想情况下会绑定到两个活动。

我看到的是,变更事件会按它应该的方式触发,并且我会收到“哟”的警报。但是,使用这个实时点击事件,我从不触发它。但是,使用显式的点击绑定,我确实点击了它。

简单的解决方法是在实时更改处理程序的末尾触发一个单击事件,但这对我来说似乎有点危险。有什么想法吗?

注意,这是在使用jquery 1.4.2,并且只在IE8中发生(我认为6/7也会发生,但我没有测试它们)。

示例(您需要jquery-1.4.2.min.js):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $.fn.changeSomething = function(){
        var t = $(this);
        t.live("change", function(){
            alert("yo");
        }); 
    };

    $(document).ready(function(){
    $("input[type='checkbox']").changeSomething();
    $("#special").live("click", function(){
      alert("ho");
    });
    });
</script>
</head>
<body>
<form>
  <input type="checkbox" id="cbx" />
  <input type="checkbox" id="special" />
  </form>
</body>
</html>

3 回复 | 直到 13 年前

Pointy 15 年前

你知道,在复选框失去焦点之前,IE不会启动“更改”事件,对吗?

编辑虽然我认为这是真的,但是测试页面的效果是非常奇怪的。我还在玩呢。“活”的机制让我困惑,让我有点紧张,尽管我完全理解它的价值。

我已经将(稍微修改和澄清的)测试页面向上: http://gutfullofbeer.net/clicks.html 我要开始做一些jquery调试

晨昏圈: 如注释中所述,当我将一个虚拟的“更改”处理程序绑定到body元素时:

$('body').bind('change', function() { return true; });

然后事情开始正常工作。我确信@alex是对的,jquery试图伪造“change”事件的冒泡是有问题的。不过还是很吓人。测试页位于 http://gutfullofbeer.net/clicks-body.html 您可以通过单击“首先使用更改处理程序设置”来查看奇怪之处,然后单击复选框并注意第二个处理程序上的“单击”处理程序只触发一次,然后单击“将处理程序绑定到正文”并观察之后复选框的行为。

Alex Sexton 15 年前

试用使用 $.delegate 有共同的祖先而不是 $.live

记住的关键 live 是这样吗? 不绑定到所选元素。它注定要 document 然后,一旦事件冒泡到文档中,它将对照您在事件目标上传递的选择器进行检查。

从中学习的关键是,在IE中,变更事件不会像大多数浏览器那样自然地冒泡。在IE中,基于启发式的事件“气泡”在所有jquery测试中的工作方式与其他浏览器中的实际事件相同。您的另一个函数中可能有一些东西正在阻止这种启发式工作。所以这是有意义的。这不是好事…

Jonas Heidelberg liori 13 年前

您可以使用 jquery.livequery plugin

$("select[name='majorsList']").livequery("change",function()
{
alert('in');
});