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调用只能工作一次？

回答

相关问题