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.

[eluser]InsiteFX[/eluser]
Try using prevent default

InsiteFX

[eluser]sbarow[/eluser]
I have no idea what that means?

[eluser]InsiteFX[/eluser]
If your using jQuery goto the jQuery site and search on prevent default

InsiteFX

[eluser]sbarow[/eluser]
Seems the issue was I had to bind the event handler to the links as they where created dynamically. Here is the fixed code if any one is interested.

Code:

function get_images(id) {
            $('#clicked_' + id).live('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);
                    }
                });
                
            });
        }
        [removed]

[eluser]InsiteFX[/eluser]
jQuery is a great site with a lot of examples that are great for learning

InsiteFX