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();