Ajax 成功调用后更新 span 标签出现问题

Question

我在更新HTML文件中的span标签方面遇到了问题。我从服务器获取JSON对象并在console.log中显示它。但是，当我尝试在AJAX:Success中将其更新到span标签上时，它不起作用。如果我在成功标签外调用同一行，则可以正常工作。

AJAX.JS

$('a.up_vote').click(function(e) {
          e.preventDefault();

          $(this).siblings("span").css( "background-color", "green" );

          $.ajax({
            url: $(this).attr('href'),
            type :'get' ,
            success : function (data){
              $(this).find("span").css( "background-color", "red" ); 
              $(this).siblings('span').html(data.count);
              $(this).siblings("span").css( "background-color", "red" );
            },
            failure : function (data){
              alert('failure') ; 
            }
          }) ;  // ajax call 

       }); // upvote link call

HTML

   <div class ='up' style="float:left">
         <a href='{% url 'upvote-detail' post.id %}' class='up_vote'>Up vote</a>
         <span> {{ post.upvote }} </span> 
   </div>

- user3487775

---

$(this)在success函数内部并不是你想象的那样...尝试打印它.. - trainoasis

你也在使用Angular JS吗？ - Neron

@Neron 我正在使用 DJANGO。 - user3487775

请更新此帖子，无论是接受答案还是通过评论或编辑提供详细信息，甚至自己回答为什么它不能解决您的问题。 - Daniel Brose

Answer 1

success 回调函数中的 $(this) 不再引用被点击的元素。

你需要直接引用它或使用一个临时变量，例如：

var clickedItem = $(this); // before ajax call

然后在成功回调函数中尝试使用$(clickedItem)而不是$(this)

我希望这对您有用，请告诉我。

这里有一个关于在回调函数中使用'this'关键字的很好的解释。

- trainoasis

Answer 2

问题在于你对$(this)的使用。 使用jQuery中'this'关键字的上下文

https://remysharp.com/2007/04/12/jquerys-this-demystified

一个简单的方法是将$(this)的引用存储起来，然后稍后使用它。

例如：

$('a.up_vote').click(function(e) {
      e.preventDefault();
      window.alert("hello");
      console.log("hello there");

      var $that = $(this);

      $that.siblings("span").css( "background-color", "green" );

      $.ajax({
        url: $that.attr('href'),
        type :'get' ,
        success : function (data){
          // alert('success');
          console.log('hello from success ajax')
          console.log(data.count); 
          $that.find("span").css( "background-color", "red" ); 
          $that.siblings('span').html(data.count);
          $that.siblings("span").css( "background-color", "red" );
          // $('#upvote_count').html(data.count);
          console.log('siblings passed')
        },
        failure : function (data){
          alert('failure') ; 
        }
      }) ;  // ajax call 

   }); // upvote link call

$that只是一个以$开头的变量名，不特定于jquery，但对于存储jquery对象（包括$()包装的DOM元素，因为它们也是jquery对象）的变量来说非常有用。

$that = $(this)是一种有用的模式，可以使用任何你想要的变量名。

此外，在某些情况下，建议使用简单的控制台调用来检查关键变量是否存在问题。

console.log('debug',$(this)); 

你只需要按F12，进入控制台选项卡（如果没有反应，请搜索你的浏览器名称+dev console），查看打印出来的内容（或者使用断点或其他调试方法，参见链接）。

调试链接

Chrome DevTools: https://developer.chrome.com/devtools

在 Chrome 中调试 JS：https://developer.chrome.com/devtools/docs/javascript-debugging

- Daniel Brose

Answer 3

$('a.up_vote').click(function (e) {
    e.preventDefault();

    $(this).siblings("span").css("background-color", "green");

    $.ajax({
        url: $(this).attr('href'),
        type: 'get',
        success: function (data) {
            $('a.up_vote').siblings("span").css("background-color", "red");
            $('a.up_vote').siblings('span').html(data.count);
        },
        failure: function (data) {
            alert('failure');
        }
    });  // ajax call 

}); // upvote link call

试试这个。

- Neeraj Pathak