jquery设置onclick null并更改ajax成功的按钮图像

Question

我有一个上传照片的ajax函数，并执行此功能onclick。 我想要的是删除成功上的onclick事件，并在uploadPhoto中更改按钮样式。如何才能做到这一点？

function uploadPhoto(image_path, message){ 
     var data = { 
      "image_path": image_path, 
      "message": message 
     }; 
     var url = 'upload_photo.php'; 
     $.ajax({ 
      type: 'POST', 
      url: url, 
      data: data, 
      async: true, 
      dataType: 'json', 
      success: function(response) { 
        //alert(response.code); 
        } 
       }); 
    } 



     <a href="#" onclick="uploadPhoto('/images/blah.jpg', 'something'); return false;"><img style = "padding-top: 15px; padding-left: 125px;" src= "images/posteaza_pe_wall.png"></a> 

Answer 1

你真的应该使用JQuery点击事件，但是，这应该做你想做的。为您的a href指定一个ID，然后删除ajax成功的onclick属性。

您需要通过“更改按钮样式”来定义您的意思，因为您的链接当前是图片。作为一个例子，我已经添加了一个例子，在称为“uploadStyle”的成功后，向href添加一个新类。你需要在CSS中定义这个。

function uploadPhoto(image_path, message){ 
     var data = { 
     "image_path": image_path, 
     "message": message 
    }; 
    var url = 'upload_photo.php'; 
    $.ajax({ 
     type: 'POST', 
     url: url, 
     data: data, 
     async: true, 
     dataType: 'json', 
     success: function(response) { 
       $("#uploadHref").removeAttr("onclick"); 
       $("#uploadHref").addClass("uploadStyle"); 
       //alert(response.code); 
       } 
      }); 
} 

<a id="uploadHref" href="#" onclick="uploadPhoto('/images/blah.jpg', 'something'); return false;"><img style = "padding-top: 15px; padding-left: 125px;" src= "images/posteaza_pe_wall.png"></a> 

Answer 2

我同意瑞克伯恩斯的答案。它会更清洁一些，因为你使用JQuery来做类似

$("#uploadHref").one("click",function() { 
    // stuff that happens on click 
});