Adding form to page via jQuery, how to get ajax to work

I’m using jQuery to pop up a CF7 form. Here’s the html code in the post:

<span class="popup-wrap"><a href="#">Show Form</a></span>
<div class="itemToShow" style="display: none;">[contact-form-7 id="469" title="Contact form 1"]</div>

And here’s the jQuery code that pops it up:

jQuery(document).ready( function () {
	jQuery('.popup-wrap a').click(function(e) {
		e.preventDefault();
		var item = jQuery(this).parent('.popup-wrap').siblings('.itemToShow');
		if (item.length === 0) {
			var item = jQuery(this).parent('.popup-wrap').parent().siblings('.itemToShow');
		}
		var itemHtml = jQuery(item).html();
		jQuery(item).empty();
		jQuery('#main').append('<div class="js-overlay clearfix"><div class="centred-block">' + itemHtml + '<span class="close" title="click to close">X</span></div></div>');
		jQuery('#main .js-overlay .centred-block .close').on('click', function() {
			//alert('overlay');
			jQuery(item).append(itemHtml);
			jQuery('#main .js-overlay').remove();
		});
	});
});

Everything works as expected except that the page refreshes when clicking ‘Send’ and the form disappears. You can click on the ‘Show Form’ link once the page has refreshed and the form will display the correct message, so it’s all functioning correctly, but I need to keep the form on the page while sending so any messages are displayed.

I’m not at all familiar with how ajax works – can anyone help me with this? Does it have something to do with the way the form is being added to the page?

http://wordpress.org/extend/plugins/contact-form-7/