使用 JQuery 清空动态加载的 span答案

【问题标题】：Emptying dynamically loaded span with JQuery使用 JQuery 清空动态加载的 span
【发布时间】：2014-08-24 17:59:55
【问题描述】：

我有一个动态加载的按钮，如下所示：

<button type="button" class="btn btn-default admire"><span class="font awesome"> 3</span></button>

我正在尝试清空文本值，在本例中为 3，并在单击按钮时使用 AJAX 调用的返回值对其进行更新。到目前为止，这是我的代码：

$(document.body).on("click", "button.admire", function(){    
$.post('ajax/example.php', function(data){
$(this).find("span").empty();
$(this).find("span").append(data);
});
});

它没有按预期工作。按钮“this”是否仍然可以在 ajax 函数中引用？还是超出范围？

编辑：如何在 ajax 调用函数中引用这个跨度？

谢谢，

威廉

【问题讨论】：

它必须超出范围，因为如果我将该行放在 ajax 调用函数之前，它将为空。

标签： jquery html ajax scope

【解决方案1】：

如果我理解你清楚，请尝试这样做，并且不要忘记将类添加到 btn

 $(document.body).on("click", "button.admire", function(){ 
   var btn = $(this);
 $.ajax({
   url : "your link",
   type: "POST",
   dataType: "Json",//by default it's returning html
   data: "your data",// if you sending data
   async: "false", // it is mean, that until ajax request is not completed it not going forword
   complete: function (response) {

     btn.find("span").empty();
     btn.find("span").append(response.yourresponse);

   }

  })

 })

【讨论】：

使用 .post 简写会不会让我无法在响应函数中访问 $(this)？
想通了，只需要将$(this)放在一个变量中，就可以在success函数中访问它了。
是的。像这样在 click 函数的全局范围内声明变量 - 请参阅我的编辑/在您的情况下设置 async false 非常重要。有了这个，你的函数不会继续前进，直到没有返回 ajax 请求

【解决方案2】：

问题在于this 指的是$.post 回调函数的this，而不是按钮的this。您需要通过将其分配给变量来保留其引用。

示例：

$(document.body).on("click", "button.admire", function(){  
  var span = $(this).find('span');
  $.post('ajax/example.php', function(data){
    span.empty();
    span.append(data);
  });
});

【讨论】：

谢谢，错字是草率的部分复制和粘贴。现实中确实有这个。
你知道我如何能够引用 AJAX 函数中的按钮吗？