如何使用 jQuery 绕过事件气泡：.live()

发布于 2024-08-26 02:06:46 字数 997 浏览 8 评论 0原文

这是有问题的代码：

$(".navItems>ul>li").live('click', function() {
  var selectorID = $(this).attr('id');
  $(".infoList").slideUp('fast', function(){
    switchTabInfo(selectorID);
  });
  function switchTabInfo(selectorID){
    var actionID = selectorID.substring(4);
    actionID = "#" + actionID;
    $(actionID).slideDown();
  }
})

所以简而言之，我有一个这些 .infoList 类，其 id 名称绑定到 nav li id。例如，列出项目的 id 可能是 nav_testsHistory。通过类名隐藏所有内容框，此 JavaScript 可以实现令人愉悦的上下滑动效果。

但是第三个内容框会闪烁，第三个内容框推送后第二个内容框也会闪烁。它会再次不必要地上下滑动。

如果我添加这样的警报：

$(".navItems>ul>li").live('click', function(){
  var selectorID = $(this).attr('id');
  $(".infoList").slideUp('fast', function(){
  switchTabInfo(selectorID);
  alert('bubble');
});

警报会触发 3 次？！

所以我的研究开始阅读有关事件泡沫的内容。我找不到的是如何检查它是否已被解雇。我还没有尝试设置输入值并围绕嵌套滑块操作进行 tf 测试。因为那很粗糙。

更多信息，上面的所有代码都在一个函数中，该函数位于 init() 函数中，该函数在文档准备就绪时调用。这是除了 jquery 1.3.2 之外唯一的 js 文件。

你们觉得怎么样？

原文

Here is the code in question:

$(".navItems>ul>li").live('click', function() {
  var selectorID = $(this).attr('id');
  $(".infoList").slideUp('fast', function(){
    switchTabInfo(selectorID);
  });
  function switchTabInfo(selectorID){
    var actionID = selectorID.substring(4);
    actionID = "#" + actionID;
    $(actionID).slideDown();
  }
})

So in short i have a these .infoList classes with id names tied to back to the nav li id.
That lists item's id might be nav_testsHistory for example. With all the content boxes hidden by class name this javascript makes a pleasing slide up, down effect.

But the third content box flickers as will the second one after a third box push. It slides up and down a second unnecessary time.

If I add an alert like this:

$(".navItems>ul>li").live('click', function(){
  var selectorID = $(this).attr('id');
  $(".infoList").slideUp('fast', function(){
  switchTabInfo(selectorID);
  alert('bubble');
});

The alert fires 3 times?!

So my research took to reading about the event bubble. What I cannot find is how to check if it has been fired. I have not tried setting an input val and doing a tf test around the nested slider action. Cause that's crude.

More info, all the code above is in a function, which is in an init() function, which is called on document ready. That's the only js file besides jquery 1.3.2.

What do you guys think?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

懒猫 2024-09-02 02:06:46

我不认为你的问题是冒泡，而是在你的选择器中。您按类别进行选择，因此所有类别都将运行该动画（全部 3 个类别，这就是您收到 3 个警报的原因）。

我认为在这种情况下：

$(".infoList").slideUp('fast', function(){
  switchTabInfo(selectorID);
});

您可能想要的是这样的：

$(".infoList:visible").slideUp('fast', function(){
  switchTabInfo(selectorID);
});

当前您正在选择所有 class="infoList" 并将它们向上滑动，如果您只想隐藏可见的，请添加 < code>:visible 选择器。 .stop() 还可以消除一些队列问题，总体如下：

$(".navItems>ul>li").live('click', function() {
  var selectorID = $(this).attr('id');
  $(".infoList:visible").slideUp('fast', function(){
    $("#" + selectorID.substring(4)).stop().slideDown();
    switchTabInfo(selectorID);
  });
})

I don't think your problem is bubbling, but in your selector. You're selecting by class, so all the classes will run that animation (all 3, which is why you get 3 alerts).

I think in this case:

$(".infoList").slideUp('fast', function(){
  switchTabInfo(selectorID);
});

What you may want is this:

$(".infoList:visible").slideUp('fast', function(){
  switchTabInfo(selectorID);
});

Currently you're selecting all class="infoList" and sliding them up, if you just want to hide the one that's visible, add the :visible selector. A .stop() would also eliminate some queue issues, like this overall:

$(".navItems>ul>li").live('click', function() {
  var selectorID = $(this).attr('id');
  $(".infoList:visible").slideUp('fast', function(){
    $("#" + selectorID.substring(4)).stop().slideDown();
    switchTabInfo(selectorID);
  });
})

回复收藏 0 原文