javascript - 即使使用 .on，Ajax 调用也只能使用一次

Question

在过去的两周里，我断断续续地尝试不止一次让我的 Ajax 调用正常工作，我是自学成才并尽最大努力自己解决问题，但这个问题让我很难受。一些遇到同样问题的人使用了 .on，它似乎对他们有用，但我仍然只能让它工作一次。

这个想法是让用户点击页面上的按钮，他们因此获得 XP。

<div id="AJTestt">Ajax Test</div> 

<script>
$(document).on('click', "#AJTestt", function($id, $SkillOne, $XP) {    
    $id = <?php if(isset($_SESSION['id'])) echo $_SESSION['id']; ?>;
    $SkillOne = <?php if(isset($SkillOne)) echo $SkillOne; ?>;
    $XP = 3;

        //get the input value
        $.ajax({
            url: "ax.php",
            cache: "false",
            data: {id : $id, SkillOne: $SkillOne, XP: $XP},
            dataType: 'text',
            type: "POST",
            success: function(data){
                console.log("Success"); 
                console.log(data); 
                history.back(); //Just to remove the ax.php bit
            },
            error: function(){
                    console.log("Error"); 
                    console.log(data); 
            }
        });
        });
 </script>

////////PHP代码(ax.php)

<?php
require_once 'resource/Database.php';
$id = $_POST['id'];
$SkillOne= $_POST['SkillOne'];
$XP = $_POST['XP'];
echo "$id \n"; 
echo "$SkillOne \n";
echo "$XP \n";

if($XP==1){
$SkillOne = $SkillOne +1;
}
else if($XP==2){
$SkillOne = $SkillOne +2;
}
else if($XP==3){
$SkillOne = $SkillOne +3;
}

$sqlUpdate = "UPDATE users SET SkillOne =:SkillOne WHERE id =:id";


$statement = $db->prepare($sqlUpdate);
$statement->execute(array(':SkillOne' => $SkillOne, ':id' => $id));

echo $SkillOne;
?>

第一次一切正常，控制台显示(用于测试目的):-成功-ID-老Xp-Xp待补充-新经验

但如果我再次单击同一个按钮，它会在控制台中显示完全相同的值。

任何帮助将不胜感激，亲切的问候翅膀

Answer 1

我认为它就这么简单，但我可能错了。

click 函数创建一个 event 对象并使其像这样可用，因此您不能像这样将变量/数据传递给该函数:

.on('click', '#myElement', function(event) {
    event.preventDefault();
});

您可以像这样将数据/变量传递给函数(参见 dataVariable):

.on('click', '#myElement', dataVariable, function(event) {
    doSomethingWith(dataVaraible);
});

如果您确实需要将数据传递给处理程序，那么您可以将 $id、$SkillOne 和 $XP 放在一个对象中，然后将对象交给处理程序:

var data = { id: 1, skillOne: 'blah', xp: 100 };

.on('click', '#myElement', data, function(event) {
    doSomethingWith(data);
});

但我认为你不需要将任何东西传递给函数，你可以像这样在里面使用它们

<script>
$(document).on('click', "#AJTestt", function() {    
    var $id = <?php if(isset($_SESSION['id'])) echo $_SESSION['id']; ?>,
        $SkillOne = <?php if(isset($SkillOne)) echo $SkillOne; ?>,
        $XP = 3;

        //get the input value
        $.ajax({
            url: "ax.php",
            cache: "false",
            data: {id : $id, SkillOne: $SkillOne, XP: $XP},
            dataType: 'text',
            type: "POST",
            success: function(data){
                console.log("Success"); 
                console.log(data); 
                history.back(); //Just to remove the ax.php bit
            },
            error: function(){
                    console.log("Error"); 
                    console.log(data); 
            }
        });
        });
 </script>