Javascript 防止对超级链接执行默认操作以运行AJAX

我的页面上有一个超链接

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

$（文档）.ready（函数（）{
$（'##上传文件'）.submit（函数（事件）{
event.preventDefault（）；
$.each（$（'##upload'）[0]。文件，函数（i，文件）{
var formData=new formData（）；
formData.append（'file-0'，file）；
ajaxUpload（formData）；
});
$（“##删除文件”）。单击（函数（事件）{
event.preventDefault（）；
ajaxDelete（）；
});
函数ajaxUpload（formData）{
log（“调用了ajaxUpload函数”）；
$.ajax({
键入：“POST”，
url:“actionpages/file_upload_action.cfm？ticket_id=#url.ticket_id#”，
数据：formData，
cache:false，
contentType:false，
processData:false，
beforeSend:function（）{
$（'.loader'）.show（）；
},
完成：函数（）{
$（'.loader'）.hide（3000）；
},
成功：功能（数据）{
log（“文件已成功发送”）；
$（“##addFileResponse”）.append（“文件已成功发送”）；
PopulateFileUploadDiv（）；
},
错误：函数（数据）{
控制台日志（数据）；
}
});
}
});
函数ajaxDelete（）{
log（“调用了ajaxDelete函数”）；
$.ajax({
键入：“POST”，
url:“actionpages/delete_attachment.cfm？ticketID=#url.ticket#id#和file#path=#filecheck.file#path#”，
数据：formData，
cache:false，
contentType:false，
processData:false，
beforeSend:function（）{
$（'.loader'）.show（）；
},
完成：函数（）{
$（'.loader'）.hide（3000）；
},
成功：功能（数据）{
log（“文件已成功删除”）；
$（“##addFileResponse”）.append（“文件已成功删除”）；
PopulateFileUploadDiv（）；
},
错误：函数（数据）{
控制台日志（数据）；
}
});
}
}); 

尝试放置任何包装##delete文件（在DOM之前加载）的div来代替文档

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

如果由于冷熔合而无法使用ID，请尝试向链接添加一个类：

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

---

这是一个很长的机会，但我认为问题是你没有逃脱所有的散列符号。请注意您的URL：

url: "actionpages/delete_attachment.cfm?ticketID=#URL.ticket_id#&file_path=#filecheck.file_path#"
url: "actionpages/file_upload_action.cfm?ticket_id=#url.ticket_id#",

您正在转义ID的哈希符号，但不在那里，因此我猜您的服务器正在对Javascript进行错误格式化，导致错误并阻止代码执行。你也应该试着重击他们

如果Id确实存在问题，那么您可以使用其他jQuery构造函数，如下所示：

---

好的，我对错误的假设是正确的，因为AJAX的代码超出了我的范围，所以我的AJAX调用失去了它们的唯一性。我基本上必须调整我的代码，使我的AJAX代码在我的标记中，但更重要的是，这些函数给出了唯一的名称，并从我的输出传递了唯一的数据

这是我修改后的正确代码：

<cfoutput>
        <table width="50%" border="0" cellpadding="5">
            <tr bgcolor="##CCCCCC">

                <td width="8%">&nbsp;</td>
                <td width="67%" ><strong>Filename</strong></td>
                <td width="18%" ><strong>Actions</strong></td>
            </tr>
            <cfloop query="filecheck">

              <tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#" class="btnav" onmouseover="style.backgroundColor='##FFFFCC';"
onmouseout="style.backgroundColor='###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#'">

                <td><img src="images/Paper-Clip-icon.png" alt="Attachment" /><br /></td>
                <td><a href="https://#subscriber.hostName#.#subscriber.baseURL#/ticket-uploads/#filecheck.file_path#" target="_blank">#filecheck.file_path#</a>
                &nbsp;
                (Record-ID &nbsp; #ID#)
                </td>
                <td>
                 <a id="delete-file#ID#" class="delete-btn#ID#"  href="">
                <img  border="0" src="images/delete_.png" alt="Delete File" width="20" height="20" />
                 </a>

                 <!---Script to upload file link  --->   
                <script>
                $(document).ready(function(){
                    $(".delete-btn#ID#").on("click",function(e){
                        // ajaxDelete();
                        console.log("Start of prevent.");
                        e.preventDefault();
                        console.log("Calling AJAX with id of #ID#.");
                        ajaxDelete#ID#();
                    });

                function ajaxDelete#ID#() {
                            console.log("ajaxDelete function called");
                            $.ajax({
                                type: 'POST',
                                url: "actionpages/delete_attachment.cfm?fileID=#filecheck.ID#&ticketID=#URL.ticket_id#&file_path=#filecheck.file_path#&techID=#url.techID#&TT=#type.TT#",
                                data: #filecheck.ID#,
                                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);
                                    $("##addFileResponse").append( "Something went wrong." );
                                }
                            });
                        }
                    });

                </script> 


                </td>
              </tr>
            </cfloop><br />
        </table>
        </cfoutput>

文件名
行动


（记录ID#ID#）
$（文档）.ready（函数（）{
$（“.delete btn#ID#”）。在（“单击”上，函数（e）{
//ajaxDelete（）；
日志（“开始预防”）；
e、 预防默认值（）；
log（“调用id为#id#的AJAX”）；
ajaxDelete#ID#（）；
});
函数ajaxDelete#ID#（）{
log（“调用了ajaxDelete函数”）；
$.ajax({
键入：“POST”，
url:“actionpages/delete_attachment.cfm？fileID=#filecheck.ID#&ticketID=#url.ticket#ID#file#path=#filecheck.file#path#&techID=#url.techID#&TT=#type.TT#”，
数据：#filecheck.ID#，
cache:false，
contentType:false，
processData:false，
beforeSend:function（）{
$（'.loader'）.show（）；
},
完成：函数（）{
$（'.loader'）.hide（3000）；
},
成功：功能（数据）{
log（“文件已成功删除”）；
$（“##addFileResponse”）.append（“文件已成功删除”）；
PopulateFileUploadDiv（）；
},
错误：函数（数据）{
控制台日志（数据）；
$
url: "actionpages/delete_attachment.cfm?ticketID=#URL.ticket_id#&file_path=#filecheck.file_path#"
url: "actionpages/file_upload_action.cfm?ticket_id=#url.ticket_id#",

$(document.getElementById('delete-file'));

<cfoutput>
        <table width="50%" border="0" cellpadding="5">
            <tr bgcolor="##CCCCCC">

                <td width="8%">&nbsp;</td>
                <td width="67%" ><strong>Filename</strong></td>
                <td width="18%" ><strong>Actions</strong></td>
            </tr>
            <cfloop query="filecheck">

              <tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#" class="btnav" onmouseover="style.backgroundColor='##FFFFCC';"
onmouseout="style.backgroundColor='###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#'">

                <td><img src="images/Paper-Clip-icon.png" alt="Attachment" /><br /></td>
                <td><a href="https://#subscriber.hostName#.#subscriber.baseURL#/ticket-uploads/#filecheck.file_path#" target="_blank">#filecheck.file_path#</a>
                &nbsp;
                (Record-ID &nbsp; #ID#)
                </td>
                <td>
                 <a id="delete-file#ID#" class="delete-btn#ID#"  href="">
                <img  border="0" src="images/delete_.png" alt="Delete File" width="20" height="20" />
                 </a>

                 <!---Script to upload file link  --->   
                <script>
                $(document).ready(function(){
                    $(".delete-btn#ID#").on("click",function(e){
                        // ajaxDelete();
                        console.log("Start of prevent.");
                        e.preventDefault();
                        console.log("Calling AJAX with id of #ID#.");
                        ajaxDelete#ID#();
                    });

                function ajaxDelete#ID#() {
                            console.log("ajaxDelete function called");
                            $.ajax({
                                type: 'POST',
                                url: "actionpages/delete_attachment.cfm?fileID=#filecheck.ID#&ticketID=#URL.ticket_id#&file_path=#filecheck.file_path#&techID=#url.techID#&TT=#type.TT#",
                                data: #filecheck.ID#,
                                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);
                                    $("##addFileResponse").append( "Something went wrong." );
                                }
                            });
                        }
                    });

                </script> 


                </td>
              </tr>
            </cfloop><br />
        </table>
        </cfoutput>