Documentation updated: http://docs.jquery.com/Events/live
Hope it's clearer now. --John On Tue, Jan 20, 2009 at 12:16 PM, John Resig <[email protected]> wrote: > Ok, so I looked at this issue more and I think the problem is being confused. > > Let's pretend that you only had one event bound: >> $("#list li").live('click', function(e) { >> alert('li clicked'); >> }); > > That click will triggered if the li is clicked or if the a is clicked > - it doesn't matter. > > Now let's look at this case: > >> $("#list li a").live('click', function(e) { >> alert('a clicked'); >> }); >> >> $("#list li").live('click', function(e) { >> alert('li clicked'); >> }); > > Just because you have an event bound to an inner element in addition > to an outer element shouldn't affect what's going on - there's no > bubbling occurring. > > In fact, when thinking about it, I'm not completely sure that > .stopImmediatePropagation() should have an effect, either (even though > it does, now - for example, if you had bound the events in a different > order, the li first, then the li a, even stopImmediatePropagation > would've failed). > > So - a solution to your problem, then. I'd recommend enforcing the > target within your li live event. > > $("#list li").live('click', function(e) { > if ( $(e.target).is("li") ) > alert('li clicked'); > }); > > or: > > $("#list li").live('click', function(e) { > if ( $(e.target).not("a") ) > alert('li clicked'); > }); > > The important point is that: > $("#list li").live('click', ...); > > Is actually saying "Anytime a click occurs on an element that matches > '#list li' OR on an element contained within an element that matched > '#list li' trigger this bound click event on that element." There is > no propagation involved there. > > In this way live events are different from normal events - I will make > a note of it in the documentation. > > --John > > > > On Tue, Jan 20, 2009 at 2:18 AM, Walther <[email protected]> wrote: >> >> Thanks, e.stopImmediatePropagation() works fine. But e.stopPropagation >> () and return false; doesn't. >> >> Sorry John, I don't have example url available. >> >> However I can post example code here: >> >> <ul id="list"> >> <li id="item_1"><a href="#">Item 1</a></li> >> <li id="item_2"><a href="#">Item 2</a></li> >> <li id="item_3"><a href="#">Item 3</a></li> >> <li id="item_4"><a href="#">Item 4</a></li> >> </ul> >> >> Script is: >> $("#list li a").live('click', function(e) { >> e.stopPropagation(); >> >> alert('a clicked'); >> }); >> >> $("#list li").live('click', function(e) { >> alert('li clicked'); >> }); >> >> If I change the e.stopPropagation() line to e.stopImmediatePropagation >> () then it works fine, thanks Ariel. Could it be a bug, or just me >> being stupid (I am good at being stupid)? >> >> Walther. >> >> On Jan 19, 8:43 pm, Ariel Flesler <[email protected]> wrote: >>> $('li a').live('click',function(e){ >>> // do stuff with link clicked >>> >>> }); >>> >>> $('li').live('click',function(e){ >>> if( $(e.target).is('a') ) >>> return; >>> // do stuff when li is clicked >>> >>> }); >>> >>> Instead of the "if" within the second handler, you could do >>> e.stopImmediatePropagation() on the first. >>> Any of those should do. >>> >>> -- >>> Ariel Fleslerhttp://flesler.blogspot.com >>> >>> On Jan 19, 8:21 am, Walther <[email protected]> wrote: >>> >>> > I am having a issue with the live event functionality in jQuery 1.3. >>> >>> > Basically, I have a list with various options in this form: >>> > <ul> >>> > <li><a href="something">Bla</a></li> >>> > . >>> > . >>> > . >>> > . >>> > </ul> >>> >>> > I want to do something when the user clicks on the list item (it has a >>> > rather wide width), and I want to do something else when the user >>> > clicks on the link inside the list item. Since the list is going to be >>> > a dynamic list I need to use live events. >>> >>> > However, when I use live events and click on the <a> tag, the event >>> > for the list item is also fired. I have tried putting return false; >>> > and event.stopPropagation(); into the event function, it doesn't work. >>> > However, when I use the normal bind() function (instead of live()) it >>> > works as intended(expect for it not being a live event which I want). >>> >>> > I am guessing that I am doing something stupid that is preventing it >>> > from working, any help would be apprechiated. >>> >>> > Regards >>> > Walther >> >> >> > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~----------~----~----~----~------~----~------~--~---
