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

时间:2012-02-17 17:00:10

标签: javascript jquery ajax

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

  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>

2 个答案:

答案 0 :(得分:1)

你应该真正使用JQuery点击事件,但是,这应该做你想要的。为您的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>

答案 1 :(得分:1)

我同意Rick Burns的回答。由于你使用的是JQuery,它可以做得更清晰一些,比如

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