jquery .live() 事件交互
假设我有一个场景，我有一个全局插件（或者至少有一个绑定到更广泛的事件的插件）。
该插件采用一个选择器，并将实时点击绑定到它。伪 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>
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).
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?
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).
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您知道 IE 在复选框失去焦点之前不会触发“更改”事件，对吧？
编辑虽然我认为这是真的，但该测试页的效果相当奇怪。我还在玩它。 “直播”机制让我感到困惑，让我有点紧张，尽管我彻底理解了它的价值。
我已经将（稍微修改和澄清的）测试页面放在上面： http://gutfullofbeer.net/clicks.html< /a> 我将开始做一些 jQuery 调试
twilight zone: 正如评论中所述，当我将虚拟“change”处理程序绑定到 body 元素时：
然后事情开始正常工作。我确信@Alex 是对的，jQuery 试图伪造“更改”事件冒泡的方式正在发生一些事情。然而仍然令人毛骨悚然。测试页面位于 http://gutfullofbeer.net/clicks-body.html，您可以通过单击“首先使用更改处理程序进行设置”来查看奇怪之处，然后单击复选框并注意第二个上的“单击”处理程序仅触发一次，然后单击“将处理程序绑定到正文”并观察复选框的情况之后的行为。
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.
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: As noted in comments, when I bind a dummy "change" handler to the body element:
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.
尝试使用具有共同祖先的
$.delegate而不是$.live使用
live时要记住的关键是该事件不是 绑定到您选择的元素。它绑定到document，然后一旦事件冒泡到文档，它就会检查您在事件目标上传递的选择器。从中学到的关键是，在 IE 中，更改事件不会像大多数浏览器那样自然地冒泡。在 IE 中，事件“冒泡”基于启发式，该启发式在所有 jquery 测试中的工作方式与其他浏览器中的实际事件相同。您的其他函数中可能存在某些东西阻止了这种启发式的工作。所以它是 IE 特定的，这是有道理的。并不是说这是一件好事...
Try using
$.delegatewith a common ancestor instead of$.liveThe key to remember with
liveis that the event is not bound to the element you select. It's bound todocumentand then once the event bubbles to the document, it checks against the selector you passed in on the event target.The key to learn from that is that in IE - the change event does not naturally bubble, like in most browsers. In IE the event "bubbles" based on a heuristic that works the same in all of the jquery tests as the actual event in other browsers. There is likely something in your other function that is stopping this heuristic from working. So it makes sense that it's IE specific. Not that that's a good thing...
您可以使用 jquery.livequery 插件
You can use the jquery.livequery plugin