javascript - AJAX 调用后隐藏 jQuery 中的按钮

Question

这个问题已经有答案了:

$(this) inside of AJAX success not working (2 个回答)

已关闭 3 年前。

enter code here感谢for-loop，我显示了数据库中的项目列表。在 Django .由于 AJAX 调用，我每一个旁边都有一个“保存按钮”，可以将它们保存到最喜欢的数据库中。一切都像魅力一样。

但我想要“保存按钮”到 .hide()每当 AJAX 调用“成功”时。但如果我这样做，页面中的每个“保存按钮”都会被隐藏。所以我尝试使用 .parent()或.closest()仅选择 <div>我的“保存按钮”没有运气。

我的 HTML:

{% for sub_product in products %}

    <div class='sub_button'>            
                    <form class="add_btn" method='post'>{% csrf_token %}
                    <button class='added btn' value= '{{product.id }} {{ sub_product.id }}' ><i class=' fas fa-save'></i></button>              
    </div>

{% endfor %}

我的 AJAX:

$(".added").on('click', function(event) {
    event.preventDefault();     
    var product = $(this).val();   
    var url = '/finder/add/';   
    $.ajax({        
        url: url,        
        type: "POST",
        data:{
            'product': product,            
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
        },
        datatype:'json',
        success: function(data) {
          if (data['success'])
          $(this).parent('.sub_button').hide();                       
        }
    }); 
});

Answer 1

您的代码失败，因为您处于不同的范围内，$(this) 将引用您正在调用的成功函数，而不是单击的元素，一旦执行单击事件监听器，您应该引用该按钮，如下应该适合你:

$(".added").on('click', function(event) {
    let addedBtn = $(this); // Here is a reference
    event.preventDefault();     
    var product = $(this).val();   
    var url = '/finder/add/';   
    $.ajax({        
        url: url,        
        type: "POST",
        data:{
            'product': product,            
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
        },
        datatype:'json',
        success: function(data) {
          if (data['success'])
          addedBtn.parent('.sub_button').hide();                       
        }
    }); 
});