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
-~----------~----~----~----~------~----~------~--~---
