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() {

});