WordPress Contact Form 7 Plugin behaves strange when it is part of AJAX-loaded content

I am currently trying to implement the WordPress Contact Form 7 Plugin into a WordPress-site I created. The theme uses jQuery to overwrite the default link behaviour and AJAX to load the requested page without actually reloading the whole page.

The problem is: The contact form works perfectly when the page where it is used on is loaded directly. However, if the page is loaded via AJAX, there are two strange behaviours: The Google reCAPTCHA widget is not showing up and after submit, instead of showing the div with the success-message, I am redirected to the themes “404” page. The mail gets sent successfully though. I use the plugin/contact-form in AJAX mode – so it makes an AJAX call itself to submit the data and handle the response without page refresh.

I am a bit overwhelmed where to start to solve this problem. Just for testing, I tried to hardcode all scripts from the direct pageload to the theme, so that they are also there when the contact-page is loaded via AJAX. Unfortunately, this didn’t have any effect at all. I also tried to call the wpcf7InitForm() function of the plugin, as it was suggested in another question here – also with no success.

This is my ajaxload-script:

jQuery(document).ready(function($) {
    // Targeting all internal links
    $(document).on('click', 'a[href^="http://' + top.location.host.toString() + '"]:not([href*="wp-admin"])', function(event) {
        event.preventDefault();

        var url = $(this).attr('href');

        $.ajax(url, {
            beforeSend: function() {
                if ($('#ajax-loader').length == 0) { $('body').append('<div id="ajax-loader"></div>'); }
                $('#ajax-loader').fadeIn();

                // Dimming static elements during loading
                $('#mainbar').animate( { opacity: '0.5' } );
            },
            success: function(data) {
                var data = $('<div />').html(data);

                window.history.pushState('...', '...', url);
                document.title = $(data).find('title').text();

                $('#mainbar').html($(data).find('#mainbar > *'));

                // Undoing design modifications to static elements
                $('#mainbar').animate( { opacity: '1' }, 150 );

                $('body').triggerHandler('reflow');
            },
        });
    });
});

Help on this topic would be really appreciated and thanks in advance!