Dear jQuery,

 Can find plenty of discussion on the use of livequery but little on
binding problems which are less dynamic. If you could point out a nice
simple thing I'm overlooking then that would be great :)

Background:
As part of a UI I'm coding I serve a series of working panes. Content
is ajaxed into the pane and then livequeries pick out class flags from
the loaded content. One such flag is "toolbar_button" class which
signals to lift the element out and make it into a button on the
toolbar. Post relocation, toolbar html's something like:

==================\/

<div class="toolbar">
<div class="toolbar_button">Save</div>
<div class="toolbar_button" >Cancel</div>
<div class="kill"></div>
</div>

==================/\

Along with the "toolbar_button" class flag, a second flag can be used
which clones the function of the button to a new button on the toolbar
(for stuff that has to be in place in the html to function - in this
case form buttons). These two types of toolbar button creation are
dealt with by the following jQuery:

==================\/

$(".toolbar_button").livequery(function(){

                p=parent_pane($(this)); // Finds the parent pane of the button 
so it
can be added to the correct toolbar

                if($(this).hasClass('copy_me')){    // If the page element 
needs to
stay in position, copy it to toolbar

                        p.children('.toolbar').prepend("<div 
class='toolbar_button'
id='toolbar_button_target'>"+$(this).val()+"</div>");

                        
$(".toolbar_button_target").css('color','red').click(function(e){
                                alert('This code is never run!');
                        }).removeClass('toolbar_button_target');


                }else{ // Move it to the toolbar
                        p.children('.toolbar').prepend($(this).remove());
                }
});

==================/\

Buttons without the "copy_me" class are successfully transposed and
function as they should. However, when adding a copy of a "copy_me"
button the resulting object can be selected (the css() rule in the
code above turns it red) but doesn't respond to event binding. Click()
function as above doesn't work, nor other events.

I can't find any complication with event bubbling, nothing is stopping
the propagation.

I would be much obliged if someone with a greater insight could point
me right on this one.

Thanks,

  James



Reply via email to