javascript - 防止超链接上的默认操作来运行 AJAX

Question

我的页面上有一个超链接

<a id="delete-file" href="">
 <img border="0" src="images/delete_.png" alt="Delete File" width="20" height="20" />
</a>                

我试图阻止单击时的默认操作并运行 AJAX 函数。由于某种原因，当我单击它时，它只会将我带到页面顶部，并且我的 AJAX 不会被触发。也没有控制台错误消息。

有人可以帮我解决语法问题吗？

<!---Script to upload file link --->     
<cfoutput>
<script>
$(document).ready(function() {
        $('##upload-file').submit(function(event){
            event.preventDefault();
            $.each($('##upload')[0].files, function(i, file) {
                var formData = new FormData();
                formData.append('file-0', file);
                ajaxUpload(formData);
            });

        $('##delete-file').click(function(event){
            event.preventDefault();
                ajaxDelete();
            });

function ajaxUpload(formData) {
            console.log("ajaxUpload function called");
            $.ajax({
                type: 'POST',
                url: "actionpages/file_upload_action.cfm?ticket_id=#url.ticket_id#",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function(){
                    $('.loader').show();
                },
                complete: function(){
                     $('.loader').hide(3000);
                },
                success: function(data) {
                    console.log("File successfully sent.");

                    $("##addFileResponse").append( "File successfully sent." );
                    PopulateFileUploadDiv();
                    },
                error: function(data) {
                    console.log(data);
                }
            });
        }
    });

function ajaxDelete() {
            console.log("ajaxDelete function called");
            $.ajax({
                type: 'POST',
                url: "actionpages/delete_attachment.cfm?ticketID=#URL.ticket_id#&file_path=#filecheck.file_path#",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function(){
                    $('.loader').show();
                },
                complete: function(){
                     $('.loader').hide(3000);
                },
                success: function(data) {
                    console.log("File successfully deleted.");

                    $("##addFileResponse").append( "File successfully deleted." );
                    PopulateFileUploadDiv();
                    },
                error: function(data) {
                    console.log(data);
                }
            });
        }
    }); 
</script>
</cfoutput>

Answer 1

$(document).on("click","##delete-file",function(e){
    ajaxDelete();
    e.preventDefault();
});

尝试放置任何包含 ##delete 文件(在 DOM 之前加载)的 div 来代替文档。

$(document).ready(function(){
    $("#wrapper-div").on("click","##delete-file",function(e){
        ajaxDelete();
        e.preventDefault();
    });
});

如果由于 Cold Fusion 而无法使其与 ID 一起使用，请尝试向链接添加一个类:

<a id="delete-file" href="" class="delete-btn">

然后尝试

$(document).ready(function(){
    $(".delete-btn").on("click",function(e){
        ajaxDelete();
        e.preventDefault();
    });
});