This line...
$("#column").append(html).find('.portHeader').bind('click',setQRX);
might be causing you a problem.
Breakdown...
$("#column") //select #column
.append(html) //append some HTML to #column
.find('.portHeader') //find anything in #column with class
portHeader
.bind('click',setQRX); //attach a click
The find() is going to select *all* div.portHeader elements, not just
the new one, and add (more) click handlers to each one.
Eg.
Add 1 portlet (A) - gets one click handler
Add 2nd portlet (B) - portlets A & B both get click handlers
portlet A now has 2 click handlers : click, and the toggle gets run
twice - first one opens, next one closes.
On Apr 9, 9:34 pm, 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>
