jQuery的 - <span>的html返回'undefined'

Question

我试图增加一个<span>的html值，当一个按钮被点击，但jQuery的说，<span>的值是未定义的，即使有一个身体的数字显示在页面上。下面是生成HTML PHP部分：是应该魔法了HTML

echo '<div class="box" style="background-color:'.$colours[0].'"> 
     <p>'.$confessions[0].'<br></p><br> 
     <div class="overlay"></div> 
     <div class="slide"> 
     <div class="slideleft">#'.$ids[0].'</div> 
     <div class="slideright"> 
      <span class="upvote" id="'.$ids[0].'">Upvote</span> 
      <span class="counter" id="'.$ids[0].'">"'.$counter[0].'"</span> 
     </div> 
     </div> 
     </div>' 

，这里是jQuery的：

$("body").on("click", ".upvote", function(e) { 
    $.ajax({ 
     url: 'vote.php', 
     data: { 
      type: 'up', 
      id: $(this).attr('id') 
     }, 
     type: 'post', 
     success: function(data) { 
      if (data == 'ok') { 
       alert($(this).next().html()); 
      } else {}; 
     } 
    }); 
}); 

它确实让警报按下upvote按钮时，但它的值是undefined而不是实际的数字。任何人都可以解释一下这个问题吗？

感谢

Answer 1

$(this)将不包含点击的元素更多，因为它成为了范围，而你的成功函数中，而不是你需要缓存变量为您的成功函数中使用。

例如：

$("body").on("click", ".upvote", function(e){ 
    var clicked = $(this); 
    $.ajax({ 
     url: 'vote.php', 
     data: { type: 'up', id: clicked.attr('id') }, 
     type: 'post', 
     success: function(data) { 
      if(data == 'ok'){ 
       alert(clicked.next().html()); 
      } else { 
      }; 
     } 
    }); 
}); 

Answer 2

您的问题是this是不是你所期望的;在“成功”回调中，this已被回弹到jqXHR对象 - 并且获取其next()是返回未定义的内容。

我建议明确捕获来解决这个问题：

$("body").on("click", ".upvote", function(e){ 
    var self = this; /// capture "this" explicitly here 
    $.ajax({ 
     url: 'vote.php', 
     data: { type: 'up', id: $(this).attr('id') }, 
     type: 'post', 
     success: function(data) { 
        if(data == 'ok'){ 
        alert($(self).next().html()); /// so now it is available here 
        } else { 
        } 
     } 
    }); 
}); 

Answer 3

我认为$(this)这里没有引用您的DOM元素。 Ajax的功能之前尝试加入

var elem = $('.upvote'); 

而在AJAX功能使用

elem而非$(this)。

Answer 4

通this为context为它的方法应用到ajax

没有必要做出新的变种访问this

退房文档：http://api.jquery.com/jQuery.ajax/

$("body").on("click", ".upvote", function(e){ 

     $.ajax({ 
      url: 'vote.php', 
      context: this, // capture this here instead 
      data: { type: 'up', id: $(this).attr('id') }, 
      type: 'post', 
      success: function(data) { 
       if(data == 'ok'){ 
        alert($(this).next().html()); /// so now it is available here 
       } 
      } 
     }); 
    });