jquery AJAX call only works once?

Question

I'm setting up some sort of small form to determine whenether my users want to submit a form anonymously or not, and whenether the content they're submitting is original or not.

The first AJAX call seems to work fine, but then when the new content is loaded from a PHP file through AJAX, then the jQuery function doesn't seem to work.

It is supposed to work like this.

1. They are presented with 2 options, submit with username , or submit anonymously (clicking either of these calls an AJAX request to the specified PHP file)
2. The PHP file contains another 2 options (see example below) called Original and Existing . (Clicking any of these doesn't seem to do anything!)
3. Finally, they should be presented with the specific submission form for their choices.

Here is my code:

jQuery

    // User
$('#user-submission').on( "click", function() {
    $.ajax({url:'<?php echo get_template_directory_uri(); ?>/submission/user-submission.php',success:function(result) {
        $("#submit-section").html(result).fadeIn('slow');
    }});
}); 
    // Anonymous
$('#anonymous-submission').on( "click", function() {
    $.ajax({url:'<?php echo get_template_directory_uri(); ?>/submission/anonymous-submission.php',success:function(result) {
        $("#submit-section").html(result).fadeIn('slow');
    }});
}); 
    // User -> Original
$('#original-submission-user').on( "click", function() {
    $.ajax({url:'<?php echo get_template_directory_uri(); ?>/submission/original-user-submission.php',success:function(result) {
        $("#submit-section").html(result).fadeIn('slow');
    }});
}); 
    // User -> Existing
$('#original-submission-anonymous').on( "click", function() {
    $.ajax({url:'<?php echo get_template_directory_uri(); ?>/submission/original-anonymous-submission.php',success:function(result) {
        $("#submit-section").html(result).fadeIn('slow');
    }});
}); 
    // Anonymous -> Original
$('#existing-submission-user').on( "click", function() {
    $.ajax({url:'<?php echo get_template_directory_uri(); ?>/submission/existing-user-submission.php',success:function(result) {
        $("#submit-section").html(result).fadeIn('slow');
    }});
}); 
    // Anonymous -> Existing
$('#existing-submission-anonymous').on( "click", function() {
    $.ajax({url:'<?php echo get_template_directory_uri(); ?>/submission/existing-anonymous-submission.php',success:function(result) {
        $("#submit-section").html(result).fadeIn('slow');
    }});
}); 

Main HTML

<section id="submit-section">   
        <div class="anonymous-or-credited">
            <a href="#" id="user-submission" class="submit-url">
                <div class="transition">
                    <h2><?php echo $current_user->display_name; ?></h2>
                    <h3>Submit a as <?php echo $current_user->display_name; ?></h3>
                </div>
            </a>
            <a href="#" id="anonymous-submission" class="submit-url">
                <div class="transition">
                    <h2>Anonymous</h2>
                    <h3>Submit a Creepypasta Anonymously</h3>
                </div>
            </a>
        </div>
</section>

PHP file containments

<div class="anonymous-or-credited">
    <a href="#" id="original-submission-user" class="submit-url">
        <div class="transition">
            <h2>Original</h2>
            <h3>I wrote this myself</h3>
        </div>
    </a>
    <a href="#" id="exisiting-submission-user" class="submit-url">
        <div class="transition">
            <h2>Existing</h2>
            <h3>I found this elsewhere</h3>
        </div>
    </a>
</div>

Answer 1

If the elements are added dynamically, selecting for the ID of the dynamically-added element will not work. You will have to instead listen for event to bubble up in a location higher up (in terms of hierarchy) on the DOM tree, like document .

I assume that both #user-submission and #anonymous-submission are already present on the page when it is initially loaded, but the rest are not. Therefore, you need to listen to the click event bubbling up to document (or any parent that is already present on the page when JS is executed):

$(document).on('click', '#original-submission-user', function() {
    $.ajax({url:'<?php echo get_template_directory_uri(); ?>/submission/original-user-submission.php',success:function(result) {
        $("#submit-section").html(result).fadeIn('slow');
    }});
});

Remember to repeat this for all dynamically-added elements which you want to bind events to.

Answer 2

If I'm understanding correctly, you have JS bindings to HTML that exists on page load -- but when you dynamically load more HTML, your existing JS isn't bound to it. One solution would be to add your click bindings to the ajax callback, after the HTML is loaded.

Answer 3

You need to enter the second parameter of the .on() function ( delegated event ):

$('#submit-section').on('click','#original-submission-user', function() {

});