Question

我设置了某种小表格，以确定我的用户想要匿名提交表单，以及他们提交的内容是否为原创内容。

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

它应该像这样工作。

它们提供了2个选项，使用用户名提交，或匿名提交（单击这些调用对指定PHP文件的AJAX请求）
PHP文件包含另外两个选项（请参阅下面的示例），称为原始和现有。（点击这些中的任何一个似乎都没有做任何事情！）
最后，应向他们提供具体的提交表格供他们选择。

这是我的代码：

的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的click事件（或执行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后将您的点击绑定添加到ajax回调。

Answer 3

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

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

});

jquery AJAX调用只能工作一次？

3 个答案: