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>
