Load new page in div

Question

I have this div named "pachete" which generates image links(click on an image and the corresponding address from the database loads) which works I get sent to correct page but what i want is to load that page into the page where I'm at(right below the image links ) into the new_page div , not get redirected to it.The class "poza_efect" is a simple opacity effect. I have a JavaScript function but for some reason it does not work.

<script>
    $('.stil_link_img').click(function () {
        $('#new_page').load($(this).attr('href'));

        return false;
    });
</script>

<div id="pachete">
    <?php $result=mysql_query( "SELECT* FROM imagini"); while($data=mysql_fetch_row($result)){ if( ($data[3]==1)&&($data[2]==2) ){ ?>
    <div class="stil_link_img">
        <a href="<?php echo $data[4];?>" class="poza_efect">
            <img src="upload/<?php echo $data[1];?>">
        </a>
    </div>
    <?php } }?>
</div>

<div id="new_page">//some content which should be replaced with my loaded page</div>

Answer 1

In your Javascript function, the reference $(this) is not pointing to the A element, but to the container DIV. Try to do it like this:

    $('.stil_link_img a').click(function() ...

And also, wrap this into the $(document).ready(function() { .... }); handler to ensure that the elements are completely loaded.

Answer 2

The stil_link_img click event is registered before the elements are loaded, so the event is never attached. Use

• $(".stil_link_img").live(..) or
• attach the event after the page is loaded completely
• move the .click after your loop

Also you should register the click event to the a-tag instead of the div(or if you want that, be sure to set some clickable background..)