2

I'm trying to load content into a DIV with jQuery load() but it is not working if the link that calls the function is generated after page load.

var ajax_load = "<img class='loading' src='ajax-loader.gif' alt='loading...' />";
$(".slide_more").click(function() {
    $("#ajaxcontent").html(ajax_load).load('p=4324.php #singlePost');
});

and the generated link:

<a href="#" class="slide_more" id="load_basic">LOAD</a>

I've tried using live() and delegate() with no luck:

$(".slide_more").live('click', function() {
    $("#ajaxcontent").html(ajax_load).load('p=4324.php #singlePost');
});

The strange thing is that the .slide_more class also calls a simple jQuery toggle which is working with live().

JMax
  • 26,109
  • 12
  • 69
  • 88
elbatron
  • 675
  • 3
  • 16
  • 30
  • Have you use firebug to see if the ajax call works? I suspect your url is being misinterpreted. – Ali Sep 08 '11 at 08:59
  • the generated link is generated after page load. this code must be executed after link is generated – galchen Sep 08 '11 at 09:02
  • Yes, under the NET/XHR nothing appears except the generated content that contains the link. – elbatron Sep 08 '11 at 09:02
  • Yes it is inside (document).ready() – elbatron Sep 08 '11 at 09:03
  • @elbatron: Nothing is wrong with the code you've posted. Can you put an `alert` in the first line of the `.slide_more` handler to check whether the handler isn't firing, or the ajax request isn't completing. – Matt Sep 08 '11 at 09:03
  • @elbatron: Furthermore, because you're adding the link to your page dynamically (I assume dynamically == after the page has loaded), you are right in using `delegate` or `live` over `click`. – Matt Sep 08 '11 at 09:04
  • Galchen, I guess you are right, how can I ensure that this piece of code is executed only after the generated link (by pure javascript) is loaded? And if that's the case, how come that toggle works? – elbatron Sep 08 '11 at 09:05
  • @Matt alert only works without live() or delegate(). If the triggering link is not in the generated content but outside on the page, everything is working fine. – elbatron Sep 08 '11 at 09:12
  • 1
    @elbatron: http://jsfiddle.net/mattlunn/2ytnW/. You're barking up the wrong tree. If the image path/ AJAX url existed in my Fiddle, it'd work fine. – Matt Sep 08 '11 at 09:26
  • @Matt, thanks. As I mentioned it works fine if .slide_more is outside of the javascript generated content. Actually the dynamically generated content is from a parsed XML... To be honest, I don't understand why it is not working... – elbatron Sep 08 '11 at 09:36
  • Ok guys! Got the problem, I just moved the script to the header from the footer, and now it works the way I wanted! Thanks for reassuring me that the script is OK, and the problem lies somewhere else. – elbatron Sep 08 '11 at 09:46
  • @elbatron: You should add your fix as an answer, and accept it yourself. – Matt Sep 08 '11 at 09:51

1 Answers1

1

The jQery snippet with the live() handler added to click() event is working fine. I just had to make sure that the code is at the top of the page before any other code.

elbatron
  • 675
  • 3
  • 16
  • 30