jquery AJAX調用只能工作一次？

我正在設置一些小表單來確定我的用戶想要匿名提交表單的時間，以及他們提交的內容是否爲原創內容。jquery AJAX調用只能工作一次？

第一個AJAX調用似乎工作正常，但是當通過AJAX從PHP文件加載新內容時，那麼jQuery函數似乎不起作用。

它應該是這樣工作的。

它們都帶有2個選項，提交與用戶名，或提交匿名（點擊這兩種調用一個AJAX請求到指定的PHP文件）
的PHP文件包含了另一個2個選項（見下面的例子）原始和現有。（點擊其中的任何一個都不會起任何作用！）
最後，應該爲他們的選擇提供具體的提交表單。

這裏是我的代碼：

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>

來源

2014-04-30 Swen

如果元素被動態地添加，選擇用於動態添加元素的ID將不工作。您將不得不監聽事件，以便在DOM樹上更高的位置（按層次結構）冒泡，例如document。

我假設#user-submission和#anonymous-submission已經出現在頁面上時，它最初加載，但其餘都沒有。因此，你需要聽click事件冒泡到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'); 
    }}); 
});

記住要重複這個對所有動態添加的元素，你想要將事件綁定到。

來源

2014-04-30 16:15:50 Terry

如果我的理解正確，你有JS綁定到頁面加載時存在的HTML - 但是當你動態加載更多的HTML時，你現有的JS並沒有綁定到它。一種解決方案是在加載HTML之後將點擊綁定添加到ajax回調。

來源

2014-04-30 16:15:33 CashIsClay

您需要輸入.on()功能（delegated event）的第二個參數：

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

});

來源

2014-04-30 16:15:39 jao

jquery AJAX調用只能工作一次？

回答

相關問題