jQuery AJAX调用只能使用一次？

Question

我正在设置某种形式的小型表单，以确定我的用户何时愿意匿名提交表单，以及何时提交的内容是否原创。

第一次AJAX调用似乎工作正常，但是随后当通过AJAX从PHP文件加载新内容时，jQuery函数似乎无法正常工作。

它应该像这样工作。

1. 它们带有2个选项， 使用username提交或匿名提交 （单击这两个调用之一将AJAX请求发送到指定的PHP文件）
2. PHP文件包含另外两个称为Original和Existing的选项（请参见下面的示例）。 （单击其中任何一个似乎都无济于事！）
3. 最后，应为他们提供选择的特定提交表格。

这是我的代码：

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');
    }});
}); 

主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文件包含

<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

如果动态添加元素，则选择动态添加的元素的ID无效。 相反，您将不得不侦听事件以在DOM树上更高的位置（就层次结构而言）起泡，例如document 。

我假设#user-submission和#anonymous-submission最初在页面上加载时已经存在，而其余页面则不存在。 因此，您需要收听单击事件冒泡至document （或执行JS时页面上已经存在的任何父项）：

$(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');
    }});
});

请记住对要绑定事件的所有动态添加的元素重复此操作。

Answer 2

如果我的理解正确，那么页面加载时就存在与HTML的JS绑定-但是当您动态加载更多HTML时，现有的JS不会绑定到该HTML。 一种解决方案是在HTML加载后将点击绑定添加到ajax回调中。

Answer 3

您需要输入.on()函数的第二个参数（ 委托事件 ）：

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

});