Lukas Baliƫnas Lukas Baliƫnas - 3 months ago 9
Ajax Question

Attach event for PHP created elements via JQuery

Using ajax i insert table rows in a dropdown menu. It works and displays it. I'd like to attach events for when the rows are clicked, however, what i've tried doesn't work. What could be the problem?

PHP

<?php

for($i=1; $i<=2; $i++){
echo "<div class='medium-block dropdown'>
<div class='dropdown-toggle stat-dropdown not-added' id='away" . $i . "' data-toggle='dropdown'>
<p class='vertical-center add-player' id='add-player" . $i . "' style='margin:0;'>Add Player</p>
</div>
<ul class='dropdown-menu drop-scroll' style='margin:0; padding:0; border-radius:0;'>
<table class='table table-hover' style='margin:0;'>
<tbody id='choose-player-away" . $i . "'>
</tbody>
</table>
</ul>
</div>";
}
for($i=3; $i<=5; $i++){
echo "<div class='medium-block dropup'>
<div class='dropdown-toggle stat-dropdown not-added' id='away" . $i . "' data-toggle='dropdown'>
<p class='vertical-center add-player' id='add-player" . $i . "' style='margin:0;'>Add Player</p>
</div>
<ul class='dropdown-menu drop-scroll' style='margin:0; padding:0; border-radius:0;'>
<table class='table table-hover' style='margin:0;'>
<tbody id='choose-player-away" . $i . "'>
</tbody>
</table>
</ul>
</div>";
}?>


JQuery

<script type="text/javascript">
$(document).ready(function(){
scalability();
$(window).resize(scalability);
$(".not-added").each(function(i){

$(this).click(function(){
var identifier = $(this).attr('id').charAt(4);
var teamid = $(this).attr('id').substring(0,4);
if($(this).hasClass("not-added")){
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("choose-player-"+teamid+identifier).innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getPlayerlist.php?team="+teamid+"&id="+identifier,true);
xmlhttp.send();

$(".player").on('click',function(){
alert("working");
});
}

});

});

});
</script>


PHP file that is fetched by AJAX

<?php

$team = $_GET["team"];
$id = $_GET["id"];

$con = mysqli_connect('localhost','root','','sportacus');

$query = "SELECT * FROM " . $team . "_team WHERE incourt = 0 ORDER BY number";
$result = mysqli_query($con,$query);

while($row = mysqli_fetch_assoc($result)){
echo "<tr class='player' id='" . $team . "-player" . $row['id'] . "'>
<td>" . $row['number'] . "</td>
<td>" . $row['first_name'] . " " . $row['last_name'] . "</td>
</tr>";
}

mysqli_close($con);

?>


I want the rows with class
.player
, which are created by the AJAX fetched php file, to be clickable.

NOTE: I am using bootstrap library if that helps
NOTE: Everything else works, except for the part:

$(".player").on('click',function(){
alert("working");
});

Answer

Like reported in event binding on dynamically created elements you need to delegate the event.

In your case, you need to change from:

$(".player").on('click',function(){

to:

$(document).on('click', ".player", function () {
     alert("working");
});
Comments