javascript - jQuery 在 ajax 调用后重新绑定(bind)点击事件

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

或使用一个事件监听器

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

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

P.s.使用complete回调意味着即使ajax失败它也能工作。您可能希望将其更改为成功。

更新

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