如何使用 jquery live 停止事件冒泡? [英] How to stop event bubbling with jquery live?

问题描述

我正在尝试停止一些事件，但 stopPropagation 不适用于live"，所以我不知道该怎么做.我在他们的网站上找到了这个.

<块引用>

现场活动不会在传统方式，不能停止使用 stopPropagation 或停止立即传播.例如，以两个点击事件为例 -一个绑定到li"，另一个绑定到li a".如果内部发生点击锚点两个事件都会被触发.这是因为当一个$("li").bind("click", fn);被绑定你实际上是在说每当单击事件发生在 LI 元素上 -或在 LI 元素内 - 触发此单击事件." 进一步停止处理实时事件，fn 必须返回错误

它说 fn 必须返回 false 所以我试图做的

 $('.MoreAppointments').live('click', function(e) {警报(嗨")；返回假；});

但这不起作用，所以我不知道如何让它返回 false.

更新

这里有更多信息.

我有一个表格单元格，并为其绑定了一个点击事件.

 $('#CalendarBody .DateBox').click(function(e){AddApointment(this);});

所以 AddApointment 只是制作了一些 ui 对话框.

现在实时代码(MoreAppointments)位于这个表格单元格中，基本上是一个锚标签.因此，当我单击锚标记时，它首先转到上面的代码(addApointment - 所以首先运行该事件)运行该代码，但不启动我的对话框，而是直接转到(MoreAppointment)事件并运行该代码.该代码运行后，它会从addApointment"启动对话框.

更新 2

这是一些 html.我没有复制整个表格，因为它有点大，而且所有的单元格都用相同的数据重复.如果需要，我会发布.

 <div class="DateLabel">1

<div class="appointmentContainer"><a class="appointments">Fkafkafk fakfka kf414<br/></a><a class="appointments">Fkafkafk fakfka kf414<br/></a><a class="appointments">Fkafkafk fakfka kf414<br/></a><a class="appointments">Fkafkafk fakfka kf414<br/></a><a class="appointments">Fkafkafk fakfka kf414<br/></a>

<div class="appointmentOverflowContainer"><div><a class="MoreAppointments">+1 More</a></div>

</td>

解决方案

简短的回答很简单，你不能.

问题

通常，您可以阻止事件冒泡"；外部元素的事件处理程序，因为内部元素的处理程序被称为first.然而，jQuery 的实时事件"通过将所需事件的代理处理程序附加到文档元素，然后在事件使文档冒泡之后调用适当的用户定义处理程序.

_{(来源:shog9.com)}

这通常会使直播"成为绑定是一种相当有效的绑定事件的方法，但它有两个很大的副作用:首先，任何附加到内部元素的事件处理程序都可以阻止活动".为自身或其任何子项开火的事件；第二，一个现场"事件处理程序无法阻止直接附加到文档子项的任何事件处理程序触发.你可以停止进一步的处理，但你不能对已经发生的处理做任何事情......当你的实时事件触发时，直接附加到子级的处理程序已经被调用.

解决方案

您最好的选择(据我从您发布的内容来看)是对两个点击处理程序使用实时绑定.完成后，您应该能够从 .MoreAppointments 处理程序return false 以防止调用 .DateBox 处理程序.

示例:

$('.MoreAppointments').live('click', function(e){警报(嗨")；返回假；//防止额外的实时处理程序被触发});//使用实时绑定允许上述处理程序抢占$('#CalendarBody .DateBox').live('click', function(e){AddApointment(this);});

I am trying to stop some events but stopPropagation does not work with "live" so I am not sure what to do. I found this on their site.

Live events do not bubble in the traditional manner and cannot be stopped using stopPropagation or stopImmediatePropagation. For example, take the case of two click events - one bound to "li" and another "li a". Should a click occur on the inner anchor BOTH events will be triggered. This is because when a $("li").bind("click", fn); is bound you're actually saying "Whenever a click event occurs on an LI element - or inside an LI element - trigger this click event." To stop further processing for a live event, fn must return false

It says that fn must return false so what I tried to do

 $('.MoreAppointments').live('click', function(e) {
   alert("Hi");
   return false;
 });

but that did not work so I am not sure how to make it return false.

Update

Here is some more information.

I have a table cell and I bind a click event to it.

 $('#CalendarBody .DateBox').click(function(e)
    {
        AddApointment(this);
    });

So the AddApointment just makes some ui dialog box.

Now the live code(MoreAppointments) sits in this table cell and is basically an anchor tag. So when I click on the anchor tag it first goes to the above code(addApointment - so runs that event first) runs that but does not launch my dialog box instead it goes straight to the (MoreAppointment) event and runs that code. Once that code has run it launches the dialog box from "addApointment".

Update 2

Here is some of the html. I did not copy the whole table since it is kinda big and all the cells repeat itself with the same data. If needed I will post it.

 <td id="c_12012009" class="DateBox">
        <div class="DateLabel">
            1</div>
        <div class="appointmentContainer">
            <a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a>
        </div>
        <div class="appointmentOverflowContainer">
            <div>
                <a class="MoreAppointments">+1 More</a></div>
        </div>
    </td>

解决方案

The short answer is simply, you can't.

The problem

Normally, you can stop an event from "bubbling up" to event handlers on outer elements because the handlers for inner elements are called first. However, jQuery's "live events" work by attaching a proxy handler for the desired event to the document element, and then calling the appropriate user-defined handler(s) after the event bubbles up the document.

_{(source: shog9.com)}

This generally makes "live" binding a rather efficient means of binding events, but it has two big side-effects: first, any event handler attached to an inner element can prevent "live" events from firing for itself or any of its children; second, a "live" event handler cannot prevent any event handlers attached directly to children of the document from firing. You can stop further processing, but you can't do anything about processing that has already occurred... And by the time your live event fires, the handler attached directly to the child has already been called.

Solution

Your best option here (so far as I can tell from what you've posted) is to use live binding for both click handlers. Once that's done, you should be able to return false from the .MoreAppointments handler to prevent the .DateBox handler from being called.

Example:

$('.MoreAppointments').live('click', function(e) 
{
  alert("Hi");
  return false; // prevent additional live handlers from firing
});

// use live binding to allow the above handler to preempt
$('#CalendarBody .DateBox').live('click', function(e)
{
   AddApointment(this);
});

这篇关于如何使用 jquery live 停止事件冒泡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！