防止超链接上的默认操作运行AJAX
防止超链接上的默认操作运行AJAX
提问于 2014-11-10 14:00:43
我的页面上有一个超链接
<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>回答 3
Stack Overflow用户
回答已采纳
发布于 2014-11-11 16:39:18
好的，所以我对错误的假设是，我的AJAX调用失去了唯一性，因为AJAX的代码在我的代码之外是正确的。基本上，我必须只使用我的代码，这样我的AJAX代码就在我的标记中，但更重要的是，函数给出了唯一的名称，并从我的输出中传递了唯一的数据。
下面是我修改的和正确的代码：
<cfoutput>
<table width="50%" border="0" cellpadding="5">
<tr bgcolor="##CCCCCC">
<td width="8%"> </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>
(Record-ID #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>Stack Overflow用户
发布于 2014-11-10 14:03:49
$(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();
});
});如果由于冷融合而无法让它使用ID，请尝试向链接中添加一个类：
<a id="delete-file" href="" class="delete-btn">然后试着
$(document).ready(function(){
$(".delete-btn").on("click",function(e){
ajaxDelete();
e.preventDefault();
});
});Stack Overflow用户
发布于 2014-11-10 15:02:21
这是一个很长的机会，但我认为问题是，你没有逃脱所有的哈希符号。请注意您的urls：
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#",您正在为您的ids转义散列号，但不存在，所以我猜您的服务器正在修改Javascript，创建错误并阻止代码执行。你也应该试试双击。
如果Id确实有问题，那么您可以使用其他jQuery构造函数，如下所示：
jQuery (元素)
$(document.getElementById('delete-file'));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26845542
复制相关文章
相似问题
腾讯云开发者
