Click to html element loaded from PHP through jQuery AJAX won't work

Question

I have a page that when clicking a button, the table with "id" attribute will appear which is loaded using jQuery AJAX with php. And in my JavaScript, putting a click event to table cell will not work.

Here's my full code. Hope you can help me.

dynamic_table.html

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      table, th, td {
        border: 1px solid black;
      }

      th, td {  
        padding: 15px;
      }

      td.filled {
        background-color: red;
      }
 
      td.unfilled:hover{
        background-color: blue;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button id="avail_seat_button" type="button">Show Available Seats</button>
    <div id="table_avail_seat">
      <!-- the table will appear here -->
 
    </div>
    <br />
    <input type="number" id="seat_no">

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/handy_script.js"></script>
    <script src="js/available_seats.js"></script>
 </body>
</html>

available_seats.js

$(document).ready(function(){
  $("#avail_seat_button").click(function(){
    $date_departure = "2017-10-22";
    $time_departure = "6:30 AM - 10:30 AM";
    $route = "Sagay-Cebu Via Tolido";

    $.ajax({
      type: "POST",
      url: "available_seats.php",
      data: {
        date_departure: $date_departure,
        time_departure: $time_departure,
        route: $route
      }
    }).done(function(result){
      $("#table_avail_seat").html(result);
    });
  });
});

code snippets form reservation.php class

$cell = 0;
for ($row = 1; $row <= 9; $row++) {
  echo "<tr>";
  for ($col = 1; $col <= 5; $col++) {
    $cell++;
    if (in_array($cell, $array_seats)) {
      //mark as not available
      echo "<td class='filled'>";
      echo $cell;
      echo "</td>";
    } else {
      //mark as available
      echo "<td class='unfilled'>";
      echo $cell;
      echo "</td>";
    }
  }
  echo "</tr>";
}

handy_script.js

$(document).ready(function(){    
  $("td.unfilled").on("click", function() {
    alert("hello world");
  });
});

available_seats.php

<?php
  include "php_library/SiteBasics.php";
  include "php_library/Reservation.php";

  $reservation = new Reservation;
  $reservation->available_seats();
?>

score 0 · Answer 1 · answered Oct 02 '17 at 04:28

0

With dynamically generated elements, you have to use jQuery.on("click", function() {}); instead of using .click()

See the link below for more details

Why use jQuery on() instead of click()

answered Oct 02 '17 at 04:28

trgiangvp3

253
3
9

Yeah, I've tried both .on() and .click() method. Still it won't work. – noyruto88 Oct 02 '17 at 07:30
Could you post the HTML code after dynamic rendering? I want to make sure that the elements you are binding click event to are existed. – trgiangvp3 Oct 02 '17 at 07:39
Try `$("#table_avail_seat").on('click','td',...` – sofl Oct 02 '17 at 13:16

score 0 · Answer 2 · answered Oct 02 '17 at 13:06

I solved my problem on my own here. In my case, adding onclick=" " properties in my reservation.php code will work. But still it's a question in my mind that why .click() or .on() will not work in my javascript.

Here's my revision of my reservation.php code:

$cell = 0;
for ($row = 1; $row <= 9; $row++) {
  echo "<tr>";
  for ($col = 1; $col <= 5; $col++) {
    $cell++;
    if (in_array($cell, $array_seats)) {
      //mark as not available
      echo "<td class='filled'>";
      echo $cell;
      echo "</td>";
    } else {
      //mark as available
      echo "<td class='unfilled' onclick=\"alert('hello')\">";
      echo $cell;
      echo "</td>";
    }
  }
  echo "</tr>";
}

$(document).on('click', 'td.unfilled', function(){ alert("hello world"); }); — nikita, Oct 02 '17 at 13:15
try the above actually the elements created dynamically so it will not work on document ready — nikita, Oct 02 '17 at 13:17

score 0 · Accepted Answer · answered Oct 02 '17 at 13:14

Have you tried to put this function

$("td.unfilled").on("click", function() {
    alert("hello world");
  });

inside the success of your ajax which replaces the html or you can simply replace this

$("td.unfilled").on("click", function() {
        alert("hello world");
      });

with this

 $(document).on('click', 'td.unfilled', function(){
  alert("hello world");
      });

Click to html element loaded from PHP through jQuery AJAX won't work

3 Answers3