Question

我已经遍布Stack Overflow寻找解决方案，似乎没有工作。

我似乎无法弄清楚这个问题。我在<td>内有一个按钮，点击它我想要进行AJAX调用以更新数据库，并且在AJAX调用成功后我想更新<td>的类来标记按钮点击。

我在函数中尝试了var that = this;。我在回调中尝试了context: this,。

        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...");
            }
         }

以下是调用该函数的方法。

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

Answer 1

onclick="setScoreA未将this设置为点击的元素，而是设置为window。你使用它的方式。你使用它的方式，我不确定你实际上可以获得对元素的引用。您应该绑定事件侦听器（无论如何都可以使用jQuery），而不是使用onclick：

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

如果确实因某种原因希望坚持this，您可以使用：

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

Answer 2

首先，在代码中使用data属性并设置一个通用的.click()侦听器

<强> 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
});

另外，我认为你动态生成许多按钮。上面的代码可以改进，整个表只有一个点击监听器，而是为每个项目设置一个点击监听器。

$("#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

<强>资源：

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

2 个答案: