函数内部的 AJAX 响应缓存/onclick-event

Question

我正在使用 AJAX 执行一些服务器端操作并刷新页面内的表格，而无需重新加载页面本身。乍一看一切正常。但是我用 PHP 编写了一个函数来发送电子邮件并通过 AJAX 执行它。当我第二次开始此操作时，旧响应被触发。

究竟发生了什么：

• 我正在单击一个按钮来执行“Sendmail-Action”
• 模态框询问我是否要执行该操作，我单击“是”
• 执行 PHP 脚本并发送电子邮件
• 在 PHP 脚本完成 (~2s) 后模态框关闭
• 表格（包括电子邮件等）已刷新，状态已更新

接下来会发生什么：

• 我正在单击一个按钮来执行相同的“Sendmail-Action” 或我表中的其他条目
• 模态框询问我是否要执行该操作，我单击“是”
• 事件触发两次 / 4xAjax-Request 而不是 2（我可以在我的 Chrome 控制台中看到它）
• Modal 关闭并发送 2 封邮件

我试图摆脱这种行为：

• 用 JSHint 检查了我的 JS
• 检查了我的 PHP 代码（apache error.log 中没有错误）
• 重新设计了 PHP-Script (Sendmail)，现在 AJAX 执行一个函数
• 尝试了不同的浏览器
• 停用 AJAX 缓存
• 使用 Apache 完全停用缓存（正确的标头）
• 在我的 php.ini 中停用了会话缓存（我不使用会话）
• 取消设置 PHP 中的所有变量
• 清除了我所有浏览器的缓存
• 检查所有标题
• 搜索了几个小时的解决方案

关于我的设置的更多信息：

• jQuery 2.1.4
• php 5.4
• Apache 2.2

我找不到解决问题的方法，这可能是因为我将内容动态添加到表格中。我过去遇到过同样的问题，我认为模态（也是动态的）会触发两次“是按钮”的点击。

Answer 1

您可以将您的 ajax 点击处理程序放在该函数之外：

$(document).on('click', '.email-resend, .email-send, .show-doc, .show-acc, .more-acc, .no, .yes, .termin', function(){
    $.fn.doAction(classname, comEntry);
}); 

---

正如您提到的，您已将其放置在函数中。相反，你应该把它放在外面：

$(document).on('click', '.bt-ok', function(){
   $.ajax({
     ....
   });
});

@pandora 编辑： 或者像这样使用第二个函数（在我的例子中）：

$(document).on('click', '.bt-ok', function(){
    $.fn.sendRequest($('#modal').attr('data-1'), $('#modal').attr('data-2'));
});

然后我可以这样调用函数并执行AJAX：

$.fn.sendRequest = function(data1, data2) {
    $.ajax({
        url: 'target.php',
        cache: false,
        data: { gimme1 : data1, gimme2 : data2 },
        success: function(response) {
            // Show Error
            if(response.length > 0){
                alert(response);
            }

            // Reload Content
            $.fn.Reload('','');

            // Close Modal
            $('#modal').css({'display' : 'none'});
        }
    });
};