ajax调用后jQuery重新绑定click事件

时间:2015-11-04 13:00:02

标签: javascript jquery ajax

我正在尝试阻止点击的默认设置,使用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调用设置在单独的函数内时,结果是相同的。

3 个答案:

答案 0 :(得分:1)

使用$('#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"); } }); }); 来调用链接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); 个事件监听器

e.preventDefault();

我不确定 标志 应该做什么。在您的示例中,这意味着链接仅在每次第二次点击时起作用。

P.S。使用 完整 回调意味着即使ajax失败也能正常工作。您可能希望将其更改为 成功

<强> 更新

@Racil Hilan有一点:当你可以直接调用链接并在调用 refreshFile 操作后返回正确的文件时,这个解决方案有点矫枉过正

答案 1 :(得分:0)

尝试

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
        }
    });
});

答案 2 :(得分:0)

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

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

在完成所有这些之后,优先考虑是否直接从链接调用PHP,或链接调用Ajax函数,而Ajax函数又调用PHP页面并解析下载(这有点复杂,但可行)。这两种方法的唯一区别在于,当下载(或错误消息)从服务器返回时,您是否希望页面刷新。

如果您想接受这个建议,请重新解释您的问题并选择您想要的方式(即直接链接或通过Ajax),以便我们为您提供帮助。