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 -
