ajax调用后jQuery重新绑定点击事件

Question

我试图阻止默认点击，使用 ajax 调用页面并触发点击完成，使用 this answer。

<a id="mylink" href="file.csv" download >Dowload</a>

<script>
var flag = false;
$('#mylink').on('click',function(e) {
// Result is the same with :
//$(document).on("click","#mylink",function(e){

    if (flag === true) {
        flag = false;
        return;
    }
    e.preventDefault();

    $.ajax({
        url: "index.php?controller=admin&action=refreshFile",
        complete: function() {
        console.log('control'); // This is called 
        flag = true;
        $('#mylink').trigger('click'); // This is not called
        }
    });
});
</script>

通话有效，但链接未触发。当在单独的函数中设置 ajax 调用时，结果是相同的。

Answer 1

使用window.location调用链接href

$('#mylink').on('click',function(e) {
    e.preventDefault();

    $.ajax({
        url: "index.php?controller=admin&action=refreshFile",
        complete: function() {
            console.log('control'); // This is called 
            window.location = $('#mylink').attr("href");
        }
    });
});

或使用one 事件监听器

var eventListener = function(e) {
        e.preventDefault();

        $.ajax({
            url: "index.php?controller=admin&action=refreshFile",
            complete: function() {
                console.log('control'); // This is called 
                $('#mylink')[0].click();
                $('#mylink').one('click', eventListener);
            }
        });
    };
$('#mylink').one('click', eventListener);

我不确定你的 flag 应该做什么。在您的示例中，这意味着该链接仅在每 2 次点击时有效。

附：使用 complete 回调意味着即使在 ajax 失败时它也可以工作。您可能希望将其更改为 success。

更新

@Racil Hilan 有一点：当您可以直接调用链接并在调用 refreshFile 操作后返回正确的文件时，此解决方案有点过头了.

Answer 2

试一试

var flag = false;
$('#mylink').on('click',function(e) {
// Result is the same with :
//$(document).on("click","#mylink",function(e){

    if (flag === true) {

        flag = false;
        windows.location="file.csv";
    }
    e.preventDefault();

    $.ajax({
        url: "index.php?controller=admin&action=fileDownload",
        complete: function() {
        console.log('control'); // This is called 
        flag = true;
        $('#mylink').trigger('click'); // This is not called
        }
    });
});

Answer 3

在我看来，这不是正确的设计。您的 Ajax 在触发下载之前调用服务器上的 index.php。如果 index.php 正在做一些必须在允许用户下载文件之前完成的安全或关键工作，那么这种设计绝对是不安全的。您甚至不需要成为黑客，只需复制链接 file.csv 并将其粘贴到浏览器的地址栏中，您将获得没有 Ajax 的文件。

您需要将 file.csv 文件放在您的网站文件夹之外（或者它可能是由服务器代码动态生成的，所以这也很好）然后 PHP 页面必须运行所有检查，如果所有检查都运行好的，它读取文件（或生成文件）并将下载返回到浏览器（如果检查失败，则返回错误消息）。这是在服务器上保护文件下载的方法。

在完成所有这些之后，您可以选择直接从链接调用 PHP，还是链接调用 Ajax 函数，该函数又调用 PHP 页面并解析下载（这有点复杂，但可行）。这两种方法的唯一区别是您是否希望在下载（或错误消息）从服务器返回时刷新页面。

如果您想接受此建议，请重新表述您的问题并选择您想采用的方式（即直接链接或通过 Ajax），以便我们为您提供帮助。