Thanks Kristinn,
this is wonderful explanation of my problem...
Regards,
Ritesh
On Apr 1, 11:55 am, "Kristinn Sigmundsson" <[EMAIL PROTECTED]> wrote:
> 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 Swedbergwww.englishrules.comwww.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 -- Hide quoted text -
>
> - Show quoted text -- Hide quoted text -
>
> - Show quoted text -
