Question

I am trying to run two scripts: one for loading page content using ajax and the other uses ajax to submit a contact form.

Load page content:

<script>
$('#top_links a').click(function (e) {
    e.preventDefault();
    var link = $(this).attr('href');
    $('#content').empty();


    $.get(link, { }, 
        function(data) {
            $('#content').replaceWith($(data).find("#content"));

        }
    )
});
</script>

Submit Form:

<script type="text/javascript">

$('#submit').click(function(event){

    event.preventDefault();
    var name = $('#name').val();
    var email = $('#email').val();
    var message = $('#message').val();
    $.post("<?php echo bloginfo( 'template_directory' ) . '/inc/mailit.php';?>", 
        {
        name: name,
        email: email,
        message: message
        },
        function(data) {
            var n = data.indexOf('<span class="success_message">');

            if (n !== 0) {
            $('#message_box_1').empty().append(data);
            } else {
            $('#contact_form').empty().append(data);

            }
        }
    );
});


</script>

Both Scripts are in the footer and are not included in the dynamically loaded content. When I access the contact page directly without using ajax to load it’s content, the form code works perfectly. But when I load the form using ajax, the submit script stops working.

This is actually a follow up question to one I posted earlier. After some thought, Im not 100% sure that the answer I received earlier was accurate. The answer relied on the assumption that the form submit code was part of the loaded content but thats not true since I put all the code in the footer which is unaffected by the content changes. Since I can’t uncheck the answer, I needed to repost.

Answer 1

If submit button is in dynamically loaded content, you have to use $.live() function.

$("#submit").live("click", function(e){})