php - jQuery - html of <span> returning 'undefined' - Stack Overflow

admin管理员组

文章数量:1394217

I'm trying to increment the html value of a <span> when a button is clicked, but jQuery is saying that the value of the <span> is undefined, even though there is a number physically being shown on the page. Here is the PHP section that generates the 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>'

and here is the jQuery that is supposed to magic up the 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 {};
        }
    });
});

It does make an alert when the upvote button is pressed, but its value is undefined as opposed to the actual number. Can anyone shed some light on this issue?

Thanks

I'm trying to increment the html value of a <span> when a button is clicked, but jQuery is saying that the value of the <span> is undefined, even though there is a number physically being shown on the page. Here is the PHP section that generates the 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>'

and here is the jQuery that is supposed to magic up the 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 {};
        }
    });
});

It does make an alert when the upvote button is pressed, but its value is undefined as opposed to the actual number. Can anyone shed some light on this issue?

Thanks

• php
• javascript
• jquery
• html

Share Improve this question Follow edited Dec 30, 2012 at 16:10 David G 97k4141 gold badges172172 silver badges258258 bronze badges asked Dec 30, 2012 at 16:09 TaimurTaimur 3,25188 gold badges3535 silver badges3838 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

$(this) won't contain the clicked element any more as it bees out of scope whilst inside your success function, instead you will need to cache the variable for use inside your success function.

For example:

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

Your problem is that this is not what you expect; in the "success" callback, this has been rebound to the jqXHR object- and getting its next() is what's returning undefined.

I remend explicit capture to solve this problem:

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

I think that $(this) isn't referencing your DOM element here. Before the ajax function try adding

var elem = $('.upvote');

And using

elem rather than $(this) in the ajax function.

pass this as the context for it to applied in methods to ajax

No need to make a new var to access this

Check out the docs: http://api.jquery./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
                } 
            }
        });   
    });

本文标签： phpjQueryhtml of ltspangt returning 39undefined39Stack Overflow