javascript - Jquery 设置 onclick null 并在 ajax 成功时更改按钮图像

Question

我有一个上传照片的ajax函数，这个函数是在点击时执行的。我想要的是在成功时删除 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 属性。

您需要定义“更改按钮样式”的含义，因为您的链接当前是图像。作为示例，我提供了一个示例，在成功后向 href 添加一个名为“uploadStyle”的新类。您需要在 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>