jquery AJAX 调用只能工作一次？答案

【问题标题】：jquery AJAX call only works once?jquery AJAX 调用只能工作一次？
【发布时间】：2014-05-01 00:15:50
【问题描述】：

我正在设置某种小型表单来确定我的用户何时想要匿名提交表单，以及他们提交的内容何时是原创的。

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

它应该像这样工作。

它们有 2 个选项，使用用户名提交，或 匿名提交（单击其中任何一个都会调用对指定 PHP 文件的 AJAX 请求）
PHP 文件包含另外 2 个选项（参见下面的示例），分别称为 Original 和 Existing。（点击其中任何一个似乎没有任何作用！）
最后，应向他们提供具体的提交表格供他们选择。

这是我的代码：

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>

【问题讨论】：

标签： javascript jquery ajax

【解决方案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');
    }});
});

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

需要输入.on()函数的第二个参数（delegated event）：

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

});

【讨论】：