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-file（在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();
    });
});

Answer 2

这是一个很长的镜头，但我认为问题是你没有逃脱所有的哈希标志。请注意您的网址：

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构造函数：

jQuery ( element )

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

Answer 3

好的，所以我假设错误与我的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>

防止超链接上的默认操作以运行AJAX

3 个答案: