ajax成功后，JQUERY附加元素不会自行切换答案

【问题标题】：JQUERY appended element doesn't toggle itself after ajax successajax成功后，JQUERY附加元素不会自行切换
【发布时间】：2016-10-21 14:57:35
【问题描述】：

我在点击事件上附加了一些表单。每个表单都有自己的提交按钮，通过 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;
      });
});

但是按下的按钮并没有消失。如何在其父表单中定位 BUTTON ？

这里是JSFIDDLE

【问题讨论】：

$(this).find('form').find('.category_button_short').hide();
@Amin 在 jsfiddle 上测试过，但没有用！
对，因为this 不是指元素
您的表单对象被 ajax 对象覆盖。因此，将您的表单对象存储在另一个变量中。检查这个小提琴：- jsfiddle.net/cvwevgx1/3

标签： jquery ajax append

【解决方案1】：

ajax 函数内部的this 指向 xhr 选项对象，而不是当前元素。

将context : this 作为选项传递给ajax。

Updated Fiddle

另外，您是否试图隐藏当前单击的元素？如果是这样，只需 $(this).hide() 即可。

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

【讨论】：