while load more image using ajax prettyphoto not work

At first i load 3 photos, after click on "load more" other 3 photos get fetched by ajax but when i click on this fetched photos pretty photo doesn't work it doesn't open the integrated image slider it just opens the image in full size.. (like a normal link) and the console does not show any errors.

You can find below the script:

<script type="text/javascript">
    $( document ).on( 'click', '.loadmore', function () 
    {
        $(this).text('Loading...');
        var ele = $(this).parent('li');
        $.ajax({
            url: 'loadmore.php',
            type: 'POST',
            data: 
            {
                page:$(this).data('page'),
            },
            success: function(response)
            {
                if(response)
                {
                    ele.hide();
                    $(".news_list").append(response);
                }
            }
        });
    });
</script>

thanks in advance for help...

Since you add dynamically Items to the dom, you've to reinitialize your Pretty Photo instance.

Something like that should work

$( document ).on( 'click', '.loadmore', function () 
{
    $(this).text('Loading...');
    var ele = $(this).parent('li');
    $.ajax({
        url: 'loadmore.php',
        type: 'POST',
        data: 
        {
            page:$(this).data('page'),
        },
        success: function(response)
        {
            if(response)
            {
                ele.hide();
                $(".news_list").append(response);
                $("a[rel^='prettyPhoto']").prettyPhoto();
            }
        }
    });
});