Question

我在更新html文件中的span标记时遇到问题。我从服务器获取JSON对象，它也在console.log中显示我。但是当我尝试在AJAX中的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>

Answer 1

成功回调中的

$(this)不再引用所单击的项目。

您必须直接引用它或使用临时变量，如：

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

然后在内部成功回调尝试

$(clickedItem)代替$(this)

我希望这适合你;请告诉我。

Here你对回调中的'this'关键词有很好的解释。

Answer 2

问题是你使用$（this）

Using the context of the 'this' keyword with jQuery

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

一种简单的方法是将referance存储到$（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

$只是一个以$开头的var名称，不是特定于jquery，而是存储jquery对象的变量的有用习惯（包括$（）包装的DOM元素，因为它们也是jquery对象）

$ that = $（this）是一个有用的模式，可以使用你想要的任何变量名称来应用。

此外，当某些东西不起作用时，总是会建议一个简单的控制台调用以检查关键变量

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

你只需点击F12然后转到控制台选项卡（或者如果没有任何反应就google你的浏览器名称+ dev控制台）并查看那里打印的内容（甚至使用断点或其他调试方法，请参阅链接）

调试链接

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

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

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

尝试这个。

在Ajax成功调用后更新span标记时出现问题

3 个答案: