Ajax成功後，JQUERY附加元素不會自行切換

Question

我在點擊事件上附加了一些表單。每個表單都有自己的提交按鈕，通過ajax向PHP文件發送請求。在成功請求後，我想刪除按下的按鈕。

JQUERY版本：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; 
     }); 
}); 

但按下按鈕不會消失。如何在其父窗體中定位按鈕？

這裏是JSFIDDLE

Answer 1

this內部AJAX功能指向XHR選項對象，而不是當前元素。

通過context : this作爲ajax的選項。

Updated Fiddle

此外，通過下面的你想隱藏當前點擊的元素？如果是這樣，只需$(this).hide()將工作。

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