JQUERY angehängt Element schaltet sich nicht nach AJAX-Erfolg

Question

ich angehängt einige Formulare auf Click-Ereignis. Jedes Formular hat seinen eigenen Submit-Button, der die Anfrage per Ajax an die PHP-Datei sendet. Nach einer erfolgreichen Anfrage möchte ich die Taste, die gedrückt wurde, entfernen.

JQUERY VERSION: https://code.jquery.com/jquery-1.9.1.js

<button id="search-button" class="sbtn"> Create Buttons </button> 

<div class="rs"> 
</div> 

    $(document).ready(function() { 

     $(".sbtn").click(function(){ 
     var results = '<br><form><input name="submit" id="mehide" type="submit" class="category_button_short" value="SEND TO PHP"/></form><br><form><input name="submit" id="mehide" type="submit" class="category_button_short" value="SEND TO PHP"/></form><br><form><input name="submit" id="mehide" type="submit" class="category_button_short" value="SEND TO PHP"/></form>'; 
     $('.rs').append(results); 
     }); 

     $(document).on('click', ".category_button_short", function() { 
     $.ajax({ 
      type: "POST", 
      url: '/echo/html/', 
      data: { 
      html: "<p>Text echoed back to request</p>", 
      }, 
      success: function(data) 
      { 
      alert(data); 
      $(this.form).find('.category_button_short').hide();// doesn't work 
      //here i want to vanish 'SEND TO PHP' which one is pressed. 
      //$(this).hide();  
      } 
     }); 

     return false; 
     }); 
}); 

Aber gedrückte Taste nicht verschwindet. Wie ziele ich BUTTON in seine Elternform?

Hier ist JSFIDDLE

Answer 1

this innerhalb Ajax-Funktion zeigt auf xhr Optionen Objekt und nicht das aktuelle Element.

Übergeben Sie context : this als eine Option zu Ajax.

Updated Fiddle

Auch durch die folgenden versuchen Sie das aktuell angeklickt Element zu verbergen? Wenn ja, würde nur $(this).hide() funktionieren.

$(this.form).find('.category_button_short').hide();