JQueryはonclickをnullに設定し、ajaxのsuccesにボタンイメージを変更します

Question

私は写真をアップロードするためのajax関数を持っています。この関数はonclickで実行されます。 私がしたいのは、succesの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のクリックイベントを使用する必要がありますが、これは必要な操作を行う必要があります。あなたの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

私はRick Burnsの答えに同意します。あなたが何かをするためにJQueryを使用しているので、幾分クリーナーでしょう。

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