It's because jQuery operates on the elements which already exist.
Lets say for instance:
<a href="load.html" class="ajax-clickery"></a>
<div id="ajax-content"></div>
Loads this page into div#ajax-content:
<a href="load-another.html" class="ajax-clickery-two"></a>
When you first render the page, you're grabbing anything that exists.
So:
jQ1 = jQuery('.ajax-clickery'); // .length = 1
jQ2 = jQuery('.ajax-clickery-two'); // .length = 0 -- No elements
exist with this class!
Once your ajax runs, the values of jQ1 and jQ2 are still the same. If,
after your ajax runs, you perform the same function again:
jQ1b = jQuery('.ajax-clickery'); // .length = 1
jQ2b = jQuery('.ajax-clickery-two'); // .length = 1 -- The element
created by Ajax
Now, an easy way to handle what you're doing here?
===
jQuery('.class-name-for-all-ajax-elements').live('click', function(){
var el = jQuery(this);
jQuery.getScript( el.attr('href') );
});
Using the live click event, you'll be able to apply functionality to
elements as they're added to the dom, through whatever means. This
requires jquery1.3+
On Mar 23, 12:47 pm, tadatoshi <[email protected]>
wrote:
> Hi,
>
> I wrote a jQuery code to display a link in the side bar (like the ones
> such as "About this group" shown in the right pane of this page)
> through AJAX.
> Then I want the click event on the link to be taken care of by
> jQuery.
> But that event is not captured by jQuery.
> How can I capture the event?
>
> The code looks something like this (class name etc. has been changed
> for the purpose of posting here):
>
> jQuery(document).ready( function($) {
>
> jQuery( ".class-name-for-element-for-ajax" ).click( function() {
> ...
> jQuery.get( jQuery(this).attr("href"), { some_variable:
> some_value }, null, "script" );
> return false;
> }
>
> jQuery( ".class-name-for-link-in-right-pane" ).click( function() {
> jQuery.get( jQuery(this).attr("href"), null, null, "script" );
> return false;
> }
>
> });
>
> The element for the first click event above exists but the the one for
> the second doesn't exist when a page is first displayed.
> When the first element is clicked, as a result of AJAX call, the
> second element is displayed.
> Then when the second element is clicked, the second click event above
> is not captured by jQuery above.
>
> Thank you in advance.
>
> Tadatoshi
