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

Question

我试图在<span>单击按钮时增加a的html值,但jQuery表示<span>未定义的值,即使页面上有一个实际显示的数字.以下是生成HTML的PHP​​部分:

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应该魔术HTML:

$("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 {
            };
        }
    });   
});