在jQuery AJAX回调中使用$（this）

Question

I have been all over Stack Overflow looking for a solution and none seem to work.

I cannot seem to figure out the issue. I have a button inside a <td> and on clicking it I want to make an AJAX call to update a database and upon success of that AJAX call I want to update the class of the <td> to mark the button as clicked.

I have tried var that = this; in the function. I've tried context: this, in the callback.

        function setScoreA(event,candidate,rubric,category,score){
            var author = document.getElementById("author").value;
            if(author != ""){
                    $.ajax({
                            context: this,
                            type: "POST",
                            url: "stressBoardUpdate.php",
                            data: "candidate="+candidate+"&category="+category+"&score="+score+"&author="+author,
                            success: function(){
                                    $(that).parent('td').siblings().removeClass('isScore');
                                    $(that).parent('td').addClass('isScore');
                            }
                    });
            }else{
                    alert("Author must contain something...");
            }
         }

Here is how the function would get invoked.

<input type="button" "="" value="5" onclick="setScoreA('Stress Board','Y235','Stress Board Rubric','Handled Stress','5');">

Answer 1

onclick="setScoreA does not set this to the element clicked but rather to window . The way you are using it. The way you are using it, I'm not sure that you could actually get a reference to the element. Instead of using onclick , you should bind an event listener (which you can do with jQuery anyway):

$("input").on("click", function () {
    setScoreA(this, 'Stress Board','Y235','Stress Board Rubric','Handled Stress','5');
});
function setScoreA(element, ...
    /* snip */
    context: element

If you really wanted to stick with this for some reason, you could use:

setScoreA.call(this, 'Stress Board' ...

Answer 2

First of all, make use data attributes in your code and setup a common .click() listener

HTML:

<input type="button" class=".button-group" data-event="Stress Board" data-candidate="Y235" data-rubric="Stress Board Rubric" data-category="Handled Stress" data-score="5">

jQuery:

$(".button-group").click(function() {
    // Do something
});

Also, I presume you are dynamically generating many buttons. The code above could be improved having only 1 click listener for the whole table, rather setting up a click listener for each item.

$("#wrapper").on("click", "input", function() {

    var event = $(this).data("event");
    var candidate = $(this).data("candidate");
    var rubric = $(this).data("rubric");
    var category = $(this).data("category");
    var score = $(this).data("score");

    setScoreA(this, event, candidate, rubric, category, score);

});

JSFIDDLE DEMO

Resources:

• .data()
• .click()
• .on()