JQuery script not working on divs fetched after page load

So I have the jquery code here:

$(document).ready(function(){
    $("div.post.photo").hover(function () {
        $(this).children("div.show").slideToggle("fast");
    });
});

It effects the html code开发者_Python百科 here:

<div class="post photo">
    <img src="source" />
    <div class="show">
        <div class="caption">
        Caption
        </div>
    </div>
</div>

However as you scroll down the page, more div's are fetched via another script (not written by me), but the above jquery script doesn't affect them.

Thoughts?

You'll need to use jQuery's .live() handler - http://api.jquery.com/live/

"Attach a handler to the event for all elements which match the current selector, now and in the future."

eg.

$("div.post.photo").live('hover', function() {
    $(this).children("div.show").slideToggle("fast");
});