Hi Ariel,
Many thanks again for replying!
I think I am confussing the two approaches here ;-) I think I need to go
down the delegation method as I may be adding a load of divs (the final app
will be used to track Amateur Radio nets, each one will need to have comment
data, signal data etc which needs to be editable) and I also want to
understand this stuff rather than copy & pasting ;-).
The fact that I have gotten this far really is testement to Jquery (I'v
treid them all), it's allowed a PHP only JayEss-a-phobe an 'in' to this
stuff.
One more question if I may impose further - What is the best JQuery Book to
buy?
Many thanks for giving me a start on this, much appreciated ;-))
Best Wishes
Mike
On 10/04/2008, Ariel Flesler <[EMAIL PROTECTED]> wrote:
>
>
> Hi Mike
>
> >>I *think* the answer is in the FAQ snippet
>
> That snippet is the base for Event delegation. That would the second
> approach, I think you've been following the first (re-binding).
> So, you take one option, or the other, not both. If you stick to re-
> binding, the technique of a class you mentioned (dynamic) should work.
>
> function bind(){
> $('a.new').click(fn).removeClass('new');
> };
> bind();
> $.ajax({
> ....
> success:function(){
> .....
> bind();
> .....
> }
> });
>
> If you do this a lot (many times on many elements), you should
> consider event delegation.
>
> Cheers
>
> --
> Ariel Flesler
> http://flesler.blogspot.com
>
> On 10 abr, 11:41, "mike mike" <[EMAIL PROTECTED]> wrote:
> > Many thanks for the help,
> >
> > *Ariel*, Yes I have read the FAQ and now followed all the links. It's
> > starting to make some sense, slowly, but I can't relate the examples to
> my
> > code (I really am a newb LOL). I'm on a learning curve here ;-))
> >
> > *Wizzud*, Many thanks for the great explanation and yep, I see the
> problem
> > and it makes sense that I am giving away click events too freely (I am
> > generous ike that). So I need to target my new dynamic DIV rather than
> all
> > divs of the same class. How to do that though?
> >
> > I tried adding a class "dynamic" to the server returned div, attached a
> > click and then removed the class but that failed badly ;) I can't see a
> way
> > to remove all clicks when an item is added and then re add click events
> (and
> > that seems silly somehow) and I can't add a unique ID per
> DIV.portlet. I
> > have read about traversing but found no answer.
> >
> > I *think* the answer is in the FAQ snippet
> >
> > $('#mydiv').click(function(e){
> > if( $(e.target).is('a') )
> > fn.call(e.target,e);});
> >
> > $('#mydiv').load('my.html');
> >
> > but I can not relate this to what I am trying to do, I still have the
> > problem of not being able to target the new DIV with if(
> > $(e.target).is('.portHeader') ) or does this method only select the
> > .portHeader Clicked?
> >
> > I'd really appreciate any help with understanding this.
> >
> > Many thanks both,
> > Mike
> >
> > On 10/04/2008, Ariel Flesler <[EMAIL PROTECTED]> wrote:
> >
> >
> >
> >
> >
> > > Have you checked this ?
> >
> > >http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_st.
> ..
> >
> > > --
> > > Ariel Flesler
> > >http://flesler.blogspot.com
> >
> > > On 9 abr, 17:34, GM1WKR <[EMAIL PROTECTED]> wrote:
> > > > Hi There,
> >
> > > > I am a total JS newb and hobbyist only so I hope I can explain my
> > > > problem...
> >
> > > > I am using UI sortables to create a sortable list of DIVs each with
> a
> > > > header and content area. I want to show/hide the content area when
> > > > the header is clicked.
> >
> > > > DIVs are added dynamically via AJAX and are sortable and use the
> > > > jquery Livedata plugin.
> >
> > > > However when my function setQRX fires I get strange results - 2 or
> > > > three clicks are needed to collapse the .portContent div. When
> > > > collapsed a click opens the div and then immeadiately closes it
> again.
> >
> > > > I am stumped, not a professional and in need of some help. I have
> > > > read about event delegation and think the problem may be related.
> >
> > > > I have found the same problem using fn toggle in any way when called
> > > > from $
> > > > ("#column").append(html).find('.portHeader').bind('click',setQRX);
> >
> > > > Best wishes
> > > > Mike
> >
> > > > HTML returned by ajax is ...
> >
> > > > <div class="portlet">
> > > > <div
> > > class="portHeader"><strong>MM0CKR</strong><span>Mike</
> > > > span><span>Aberdeen<span class="rst">59</span></span></div>
> > > > <!--<div class="portToolbar">
> > > > <ul>
> > > > <li>Tool 1</li>
> > > > <li>Tool 2</li>
> > > > <li class="sh">Tool 3</li>
> > > > </ul>
> > > > </div>-->
> > > > <div class="portContent"><p>Comment Text in
> > > here.<p></div>
> > > > <div class="portContentToggle">Toggle</div>
> > > > </div>
> >
> > > > <jquery code>
> > > > function setQRX(){
> > > > var parent = $(this);
> > > > $(this).toggle(
> >
> > > function(){$(this).next(".portContent").show().end();},
> >
> > > > function(){$(this).next(".portContent").hide("slow").end();}
> >
> > > > );return false;
> > > > }
> >
> > > > $('#column').sortable();
> > > > $('#addportlet').livequery('click',function()
> > > > {
> > > > var data = $("#portAdd").serialize();
> >
> > > > $.ajax({
> > > > url: "3ajax.php",
> > > > cache: false,
> > > > data: data,
> > > > success: function(html){
> > > > $
> > > > ("#column").append(html).find('.portHeader').bind('click',setQRX);
> >
> > > $('#column').sortable('refresh');
> > > > $( "form" )[ 0
> > > ].reset();
> > > > }
> > > > });
> > > > }
> > > > );//click#addport
> > > > </code>- Ocultar texto de la cita -
> >
> > - Mostrar texto de la cita -
> >
>
