Have to click twice to load Ajax Data.

[eluser]sbarow[/eluser]
Hey,

Pretty new to Ajax.

I am trying to make a gallery, where all the images in the database will be show. An image can then be clicked and it will take you to the top of the page and the image clicked will be loaded into the main div view. This is the code for the view.

Code:

<div id="work_gallery">
    <div id="main_image">
    </div>
    &lt;?php
        foreach($work_images as $item)
        {
            echo "<a id='clicked_1' href='#top_nav'><img src='images/thumbs/1' /></a>";
        }
    ?&gt;
</div>

I then have that info posting to this controller function

Code:

function work_images($id)
    {
        $image = $this->Info_model->get_item_where('Work_images', 'id', $id);
        foreach($image as $item) {
            echo "<img >image' />";
        }
    }

And finally here is my Javascript

Code:

[removed]
        function get_images(id) {
            $('#clicked_' + id).click(function() {
            
            var ajax_data = { ajax: '1'};
            
            $.ajax({
                    url: '<?php echo base_url(); ?>site/work_images/' + id,
                    type: 'POST',
                    data: ajax_data,
                    success: function(msg) {
                        $('#main_image').html(msg);
                    }
                });
                
            });
            return false;
        }
        [removed]

The whole thing works fine. Except that you have to click twice on an image for it to actually load. This is not ideal. Can any one explain why this is happening and how I can fix the problem?

Thanks in advance.