jQuery AJAX调用只能生效一次？

Question

我正在设置一个小型表单，以确定我的用户是否想匿名提交表单，以及他们提交的内容是否原创。

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

它应该像这样工作：

1. 他们被呈现出两个选项，“使用用户名提交”或“匿名提交”（单击其中任何一个都会调用指定PHP文件的AJAX请求） 2. PHP文件包含另外两个选项（请参见下面的示例），称为“原始”和“现有”。 （单击其中任何一个似乎没有任何作用！） 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>

- Swen

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

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

- Terry

---

非常清晰易懂的回答，提供了有用的示例代码。全方位优秀的回答... +1 - James Osguthorpe

Answer 2

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

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

});

- jao

Answer 3

如果我理解正确，您有JS绑定到页面加载时存在的HTML，但是当您动态加载更多HTML时，现有的JS并没有与之绑定。一种解决方法是在Ajax回调中添加单击绑定，加载完HTML后再添加绑定。

- CashIsClay