Question

我有一个页面，当单击一个按钮时，将出现带有“id”属性的表，该表使用jQuery AJAX和php加载。在我的JavaScript中，将click事件放到表格单元格中将不起作用。

这是我的完整代码。希望你能帮帮我。

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

代码片段形成了reservation.php类

$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();
?>

Answer 1

使用动态生成的元素，您必须使用jQuery.on("click", function() {});而不是.click()

请参阅以下链接了解更多详情

Why use jQuery on() instead of click()

Answer 2

我自己在这里解决了我的问题。在我的情况下，在我的reservation.php代码中添加onclick =“”属性将起作用。但是在我的脑海里仍然存在一个问题，即.click（）或.on（）无法在我的javascript中运行。

这是我对reservation.php代码的修订：

$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>";
}

Answer 3

您是否尝试过此功能

$this->id

你的ajax成功取代了html，你可以简单地替换这个

ide-helper:models

用这个

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

点击通过jQuery AJAX从PHP加载的html元素将无效

3 个答案: