Calling Javascript function after loading an AJAX page

Question

I'm not a programmer so I apologize if my question doesn't make a lot of sense.

But basically I have one page index.php that has a set of filters (by project, year, month) and after pressing submit sends the variables to filterData.php to be used in some SQL statements.

The results in the form of a table of image thumbnails are returned to a div in index.php. What I want to do is have it so when the user clicks on an image the border color will change to highlight the current object.

<script type="text/javascript">
$(document).ready(function () {
    $('.thumbnail_small').click(function(){
        $(this)
            .css('border-color','#000')
            .siblings()
            .css('border-color','#ccc');
    });
});
</script>

^ That is the script I have right now and it works if the table of thumbnails is hardcoded into index.php. Once I have the table loaded through filterData.php, it doesn't work anymore.

What is the reason for this and how can I work around it?

Sarfraz · Accepted Answer · 2012-03-04 15:40:53Z

1

Once I have the table loaded through filterData.php, it doesn't work anymore.

Use live or better on depending on version of jQuery you are using:

$('#mainContainer').on('click', '.thumbnail_small', function(){
    $(this)
        .css('border-color','#000')
        .siblings()
        .css('border-color','#ccc');
});

Or

$('.thumbnail_small').live('click', function(){
    $(this)
        .css('border-color','#000')
        .siblings()
        .css('border-color','#ccc');
});

For elements that are added later or dynamically, you got to use live or on.

answered Mar 4, 2012 at 15:40

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1067577 Over a year ago

Is #mainContainer the parent div? I am using Jquery 1.3 and this is what I changed it to but it's still not working: <br/><script type="text/javascript"> $(document).ready(function () { $('#box_left').on('click', '.thumbnail_small', function(){ $(this) .css('border-color','#000') .siblings() .css('border-color','#ccc'); }); }); </script>

Sarfraz Over a year ago

@user1067577: Yes you should have a container with id to that eg id="mainContainer" you can change its name or use existing one. Or you can simply use second example in my answer.

user1067577 Over a year ago

You are amazing!! Thank you so much :) I used the second example.

Collectives™ on Stack Overflow

Calling Javascript function after loading an AJAX page

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related