This is from an earlier post, it shows you how to add events only to
the recently added content. Aswell as talking about handlers in
general. Might prove usefull for you.
----------------------------------------------------------------
Hi Kim,
My friend Jonathan Chaffer posted a reply to a similar question that
I think you might find helpful. Here it is:
In the near future there will be a dead-tree reference for jQuery on
the shelves. A short excerpt from the first draft should prove
applicable to this conversation:
-----------------------------------
AJAX and Events: Handling the Handlers
Suppose we wanted to highlight all the <h3> elements on the page when
they are clicked. By now the code to perform such a task is almost
second-nature:
$(document).ready(function() {
$('h3').click(function() {
$(this).toggleClass('highlighted');
});
});
All is well, in that clicking on the letters on the left side of the
page highlights them. But the dictionary terms are also <h3>
elements, and they do not get the highlight. Why?
The dictionary terms are not yet part of the DOM when the page is
loaded, so the event handlers are never bound. This is an example of
a general issue with event handlers and AJAX calls: loaded elements
must have all of their event handlers rebound.
A first pass at solving this problem is to factor the binding out
into a function, and call that function both at the time the document
is ready and after the AJAX call:
$(document).ready(function() {
var bindBehaviors = function() {
$('h3').click(function() {
$(this).toggleClass('highlighted');
});
}
bindBehaviors();
$('#letter-a .button').click(function() {
$('#dictionary').hide().load('a.html', function() {
bindBehaviors();
$(this).fadeIn();
});
});
});
Now we can put all our event handlers in the bindBehaviors()
function, and call that whenever the DOM changes. Clicking on a
dictionary term now highlights it, as we intended. Unfortunately,
we've also managed to cause very strange behavior when the letters
are clicked. At first they highlight correctly, but after the button
is clicked (loading the dictionary entries), they no longer highlight
on subsequent clicks.
Closer inspection reveals that, after the AJAX call, the highlighting
breaks because the click handler is fired twice. A
doubled .toggleClass() is the same as none at all, so the click seems
not to work. A tricky behavior to debug, to be sure. The culprit here
is bindBehaviors(), which binds the click event to all <h3> elements
each time. After a button click, there are actually two event
handlers for clicks on an <h3>, which happen to do the exact same
thing.
Scoping an Event Binding Function
A nice way around this double-firing is to pass some context into
bindBehaviors() each time we call it. the $() constructor can take a
second argument, a DOM node to which the search is restricted. By
using this feature in bindBehaviors(), we can avoid multiple event
bindings:
$(document).ready(function() {
var bindBehaviors = function(scope) {
$('h3', scope).click(function() {
$(this).toggleClass('highlighted');
});
}
bindBehaviors(this);
$('#letter-a .button').click(function() {
$('#dictionary').hide().load('a.html', function() {
bindBehaviors(this);
$(this).fadeIn();
});
});
});
The first time bindBehaviors() is called, the scope is document, so
all <h3> elements in the document are matched and have the click
event bound. After an AJAX load, though, the scope is instead the
<div id="dictionary"> element, so the letters are not matched and are
left alone.
Using Event Bubbling
Adding scope to a behavior-binding function is often a very elegant
solution to the problem of binding event handlers after an AJAX load.
We can often avoid the issue entirely, however, by exploiting event
bubbling. We can bind the handler not to the elements that are
loaded, but to a common ancestor element:
$(document).ready(function() {
$('body').click(function(e) {
if ($(e.target).is('h3')) {
$(e.target).toggleClass('highlighted');
}
});
});
Here we bind the click event handler to the <body>element. Because
this is not in the portion of the document that is changed when the
AJAX call is made, the event handler never has to be re-bound.
However, the event context is now wrong, so we compensate for this by
checking what the event's target attribute is. If the target is of
the right type, we perform our normal action; otherwise, we do
nothing.
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Mar 18, 2007, at 2:24 PM, Kim Johnson wrote:
-------------------------------------------------------------
On 4/1/07, bingo <[EMAIL PROTECTED]> wrote:
okie..I found a solution..but not sure how good it is..
here is what I have done..
I have created a function like this
jQuery.fn.loadContent = function(options) {
$(this).removeClass("loadContent");
$(this).addClass("pointer");
return $(this).click(function(){
url = $(this).attr('href');
$("div#content").load(url);
return false;
});
};
>>template.html
$(document).ready(function(){
$("span.loadContent").loadContent();
});
>>resume.html
$(document).ready(function(){
$("span.loadContent").loadContent();
});
It was important to remove loadContent class to avoid attaching double
click event to span tag..
Can some evaluate my code and give me suggestions.
Regards,
Ritesh
On Apr 1, 8:19 am, "bingo" <[EMAIL PROTECTED]> wrote:
> hi Kristinn..
>
> sorry for the confusion..in haste..I forgot to type in href attribute
> in the span..the actual code contains href attribute also...
>
> Regards,
> Ritesh
>
> On Apr 1, 5:18 am, "Kristinn Sigmundsson" <[EMAIL PROTECTED]> wrote:
>
>
>
> > curious about one thing, where do you get the url from in:
> > url = $(this).attr('href');
>
> > as the span doesn't have a href attrib.
>
> > On 4/1/07, bingo <[EMAIL PROTECTED]> wrote:
>
> > > Hi,
>
> > > I am having some trouble with ajax and jquery...
>
> > > I have my default webpage template and in that I have defined my
> > > javascript as shown below
>
> > > <!-- My webpage template -->
> > > $(document).ready(function(){
> > > $('.loadContent').click(function(){
> > > url = $(this).attr('href');
> > > $("div#content").load(url);
> > > return false;
> > > });
> > > });
>
> > > <span class="loadContent">resume</span>
>
> > > when I click on resume..it properly loads in the "content" div...my
> > > resume is as follow
> > > <div>
> > > <span class="loadContent">Publications</span>
> > > </div>
>
> > > However when I click on publication, my publications are never
> > > loaded...using firebug..I found that $('.loadContent') is never
> > > called...
> > > Looking some previous post, I found that I need to use callback
> > > function.....But I dont have any idea on how use callback..
> > > please let me know if you have any suggestions..
>
> > > Regards,
> > > Ritesh- Hide quoted text -
>
> > - Show quoted text -- Hide quoted text -
>
> - Show quoted text -
