jquery ajax load each post

3 Views

I’m working on a wordpress theme with ajax load of some content from featured posts that will be displayed on homepage after a click or other trigger on post image.

Basiclly its something like this:

Read More
<ul id="posts">
<li class="post">
    <a href="post_url" class="image_link"><img src="images/featured_image.jpg" /><a href="#">
    <a href="#">title</a>
    <div class="ajax_loaded_info"></div>
</li>
<li class="post">
    <a href="post_url" class="image_link"><img src="images/featured_image.jpg" /><a href="#">
    <a href="#">title</a>
    <div class="ajax_loaded_info"></div>
</li>
<li class="post">
    <a href="post_url" class="image_link"><img src="images/featured_image.jpg" /><a href="#">
    <a href="#">title</a>
    <div class="ajax_loaded_info"></div>
</li>
</ul>

The jquery code is like this: 

$(".image_link").click(function () {
    $(".ajax_loaded_info").load($(this).attr("href") + " .title");
});

It does success loading the content but it shows the same content (of the last post) for all the posts..

I tried to look for a solution and try some stuff wuthout success..
Hope you guys will help me out in here.

Thanks!!

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. Here you go, a simple sub query with the ‘this’, doesnt look like much changed, but try it 🙂

    $(".image_link").each(function(){
    $(this).click(function () {
        $(".ajax_loaded_info",this).load($(this).attr("href") + " .title");
    });
})