jquery .live()事件交互 [英] jquery .live() event interactions

查看:135
本文介绍了jquery .live()事件交互的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

Let's say I have a scenario where I have a global plugin (or at least a plugin that binds to a wider array of events).

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

This plugin takes a selector, and binds a live click to it. Something in pseudo-jquery that might look like this:

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

在另一个页面上,我还有一个类似的实时绑定:

On another page, I have an additional live binding something like this:

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

在这种情况下,理想情况下该复选框最终会被绑定到两个直播事件。

Within this scenario, the checkbox would ideally end up being bound to both live events.

我所看到的是变化事件应该触发,我被警告哟。但是,使用此实时点击事件,我从不触发它。但是,使用显式点击绑定,我会点击它。

What I'm seeing is that the change event fires as it should, and I'm alerted "yo". However, using this live click event, I never trigger it. However, using an explicit click binding, I DO hit it.

简单的解决方法是在实时更改处理程序结束时触发单击事件,但这对我来说似乎很笨拙。有任何想法吗?

The easy workaround is to trigger a click event at the end of the live change handler, but this seems janky to me. Any ideas?

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

Note that this is using jquery 1.4.2 and only occurs in IE8 (I supposed 6/7 would too, but I haven't tested them).

一个例子(你需要jquery-1.4.2.min.js):

an example (you'll need 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>


推荐答案

你知道IE不会触发改变事件直到复选框失去焦点,对吗?

You know that IE won't fire the "change" event until the checkbox loses focus, right?

编辑,而我认为这是真的,来自该测试页面的效果非常奇怪。我还在玩它。 现场机制让我感到困惑,让我有点紧张,虽然我完全理解它的价值。

edit while I think that's true, the effect from that test page is pretty bizarre. I'm still playing with it. The "live" mechanism confuses me and makes me a little nervous, though I thoroughly understand its value.

我已经把(略微修改和澄清的)测试页面了: http://gutfullofbeer.net/clicks.html ,我将开始做一些jQuery调试

I've put the (slightly modified and clarified) test page up: http://gutfullofbeer.net/clicks.html and I'm going to start doing some jQuery debugging

twilight zone:如评论中所述,当我将虚拟更改处理程序绑定到body元素时:

twilight zone: As noted in comments, when I bind a dummy "change" handler to the body element:

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

然后事情开始正常工作。我确信@Alex是正确的,jQuery试图伪造变化事件的冒泡方式正在发生一些事情。然而仍然是幽灵般的。测试页面位于 http://gutfullofbeer.net/clicks-body.html ,您可以通过单击首先使用更改处理程序进行设置来查看奇怪,然后单击复选框并注意第二个上的单击处理程序仅触发一次,然后单击将处理程序绑定到正文并查看复选框的方式在那之后表现出来。

then things start working normally. I'm sure that @Alex is right, that there's something going on with the way jQuery is trying to fake the bubbling of the "change" event. Still spooky however. The test page is at http://gutfullofbeer.net/clicks-body.html and you can see the weirdness by clicking the "Setup with change handler first", then click the checkboxes and note that the "click" handler on the second one only fires once, then click the "Bind a handler to the body" and watch how the checkboxes behave after that.

这篇关于jquery .live()事件交互的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆