JQuery to change div when link created from mysql data is clicked - php

Question

I have a navigation bar that is created from a MySQL table. I want to click on the link and only change the contents of two divs on the page. However, I cannot figure out the proper way to write the jQuery code.
I've attempted to include a single class for all the links and use
$(".class").click(function(){
//the code to change the div
}
But it doesn't seem to be working.
PHP code
<?php
require(__DIR__.'/dbconf.php');
require(__DIR__.'/db_functions.php');
$db_con = mysqli_connect($host, $username, $pass, $dbname);
$column = "playerName";
$table = "Players";
$condition = "";
$key = "";
$query = selectData($db_con, $column, $table, $condition, $key);
while($row=mysqli_fetch_assoc($query)){
$res[] = $row[$column];
echo "<a href = # class = 'player' name ='".$row[$column]."'>".$row[$column]."</a>";
}
mysqli_close($db_con);
?>
JQuery code
$(".player").click(function(){
var player = $(this).val()
var dataString = 'playerName'+ player;
$.ajax({
type: "POST",
url: "coin_amount.php",
data: dataString,
cache: false,
success: function(postresult){
$(".coins").html(postresult);}
});
return false;
});
It seems like this should work. That when any link with the class "players" is clicked, it should change the value of the player variable and call the coin_amount.php file. But it doesn't. What am I not understanding? I do know the ajax function is correct because I call that function on page load and it works. So it has to be something in the click function.

Answer 1

If player is created after the DOM has loaded, you will have to attach the click listener to the document, like so:
$(document).on('click', '.player', () => {
// execution code here
}

Answer 2

ADD It in the <script></script> tag in the head of page after have loaded the jquery library
Jquery code:
$(document).ready(function() {
$("#cercaButton").click(function () {
$(".divClass").load("./action/loadDdtGiornalieri.php");
});
});
In your case add the id at the link tag generated from the php code that print the menu.
I suggest you to add different ID at every link of the menu in order of load different contenent
From php you have to generate a string as
<a id="cercaButton">Cerca</a>
This is a complete example of load, including also the parameter post at the php web page
If you have to post data at the page loaded from jquery simplest code is
$(document).ready(function() {
$("#cercaButton").click(function () {
$(".divClass").load("./action/loadDdtGiornalieri.php", {
dateIn: $("#dateIn").val(),
tipoInterrogazione: $("#tipoInterrogazione").val()
});
});
});