Added a comment and a link to a plain JS test at the bug tracker:
http://dev.jquery.com/ticket/4867
On Jul 14, 3:16 am, Ricardo <ricardob...@gmail.com> wrote:
> Came back to review this and think I got a proper explanation for your
> issue. You are hitting a strange "loop" (not a loop, but couldn't find
> a better word). The event only bubbles up AFTER the current element's
> handler has been executed. So, after initState1 in .blk_type finishes
> (and adds a new handler to #blk_1), the "old" event fired by .blk_date
> (which doesn't exist at this point anymore, but the event is still
> bubbling) hits #blk_1. Am I confused? you bet. Let's see it in detail:
>
> 1. initState1 is called.
> > initState2 is bound to #blk_1
> > text == STATE1.
>
> 2. click - initState2 fires from #blk_1.
> > initState2 is unbound from #blk_1
> > div.blk_type added
> > text == STATE2;
> > initState1 is bound to .blk_type
> > click event bubbles up from #blk_1 (reaches no handlers)
>
> 3. click - initState1 fires from .blk_type
> > initState1 is unbound from .blk_type
> > div.blk_type removed
> > text == 'STATE1';
> > initState2 is bound to #blk_1
> > click event bubbles up from .blk_type and * reaches #blk_1 *
> > initState2 (now bound to #blk_1) is fired -> step 2
>
> So what happens is that you never see step 3 here, but it is
> happening. As my (lucky) test showed, returning false or calling
> e.stopPropagation() inside initState1 prevents this from happening.
>
> This is mind-bending logic anyway, you can't blame the computer for
> causing this :D For a start, the sample could be written as
>
> $('#blk_1').toggle(function () {
> $(this).html( "STATE1" );
> }, function () {
> $(this).html( '<div class="blk_type">STATE2</div>' );
>
> });
>
> And many other better ways, so it's likely that your application can
> also be restructured to something less prone to errors. Sorry for the
> long message!
>
> cheers
> -- ricardo
>
> On Jul 9, 1:48 pm, Dennis Jacobfeuerborn <djacobfeuerb...@gmail.com>
> wrote:
>
> > On Jul 9, 6:20 am, Ricardo <ricardob...@gmail.com> wrote:
>
> > > You're binding the second event to the inner element - when you click
> > > it, the event bubbles up to #blk_1, so *both* handlers are triggered.
> > > Try this:http://pastebin.com/m44c1cffd
>
> > But I explicitly unbind() the previous events before binding the new
> > one. So there is always just one binding active so I'm don't see how
> > that event can bubble up?
>
> > > Anyway, the way you're doing it doesn't make sense. You should just
> > > use live() for the inserted elements and return false/e.preventDefault
> > > () to stop bubbling.
>
> > The actual script is more complex. This version is simplified to
> > illustrate the problem.
>
> > > On Jul 8, 8:12 am, Dennis Jacobfeuerborn <djacobfeuerb...@gmail.com>
> > > wrote:
>
> > > > live() version:http://pastebin.com/f5781ee8b
>
> > > > The live() version works...as long as you don't introduce a second
> > > > block.
>
> > > > In this example "blk_1" and "blk_2" can be independently between
> > > > STATE1 and STATE2 as long as you make sure that the last click
> > > > switches a block to STATE1 before you modify the other block. If you
> > > > switch a block to STATE2 and then modify the other block then the
> > > > initial block can no longer be switched back and forth. Apparently the
> > > > die() removes the handler from both blocks despite only adressing the
> > > > "own" block using a selector like e.g. "#blk_1 .blk_type".
>
> > > > Again if you replace the "'#'+block_id+' .blk_type'" bits by
> > > > "'#'+block_id" so that the handler is no longer attached to the
> > > > dynamically inserted html but the outer static div around it the
> > > > example starts working as it should.
>
> > > > This is problematic since what I'm actually trying to do is to get
> > > > html code from the server via ajax that represents a panel with
> > > > buttons and I then need to attach a click handler to these buttons
> > > > which will then again send an ajax request to the server.
>
> > > > I have no idea how to implement something like this if I cannot insert
> > > > html with html() and then attach event handler to the inserted
> > > > elements.
>
> > > > On Jul 8, 5:06 am, Ralph Whitbeck <ralph.whitb...@gmail.com> wrote:
>
> > > > > Have you tried using live instead of bind?
>
> > > > >http://docs.jquery.com/Events/live#typefn
>
> > > > > On Tue, Jul 7, 2009 at 9:15 PM, Dennis Jacobfeuerborn <
>
> > > > > djacobfeuerb...@gmail.com> wrote:
>
> > > > > >http://pastebin.com/f6990228d
>
> > > > > > In this code clicking on the text should change it between "STATE1"
> > > > > > and "STATE2" but doesn't. It actually does switch to STATE1 again
> > > > > > but
> > > > > > due to a spurious "click" event immediately switches back to STATE2
> > > > > > so
> > > > > > that the switch can't be really seen. Uncommenting the commented
> > > > > > javascript line and commenting the one above it no longer uses
> > > > > > html()
> > > > > > and show the correct behavior.
>
> > > > > > Is this a bug or am I doing something fundamentally wrong here?
>
> > > > > > Regards,
> > > > > > Dennis
>
> > > > > > PS: I filed a bug here:http://dev.jquery.com/ticket/4867
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to jquery-dev@googlegroups.com
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---
