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_stop_working_after_an_Ajax_request.3F
>
> --
> 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>
> >
>
