Ajax 重新加载后，onclick 功能不起作用<div>

Question

My onclick function works only first time.我的 onclick 功能仅在第一次有效。 After onclick function triggers an ajax request, inside success function, I reload a which wraps the code that retrieves values from SQL and build html table with for loop.在 onclick 函数触发 ajax 请求后，在成功函数内部，我重新加载了一个包装了从 SQL 检索值的代码并使用 for 循环构建 html 表的代码。

Although it refreshes the table correctly (it adds new values from db correctly), the onclick function stops reacting when I click the table elements.尽管它正确刷新了表格（它正确地从 db 添加了新值），但是当我单击表格元素时 onclick 函数会停止响应。 But when I refresh the table, it starts to work again, but still for only 1 time但是当我刷新表时，它又开始工作了，但仍然只有 1 次

What am I doing wrong?我究竟做错了什么？

Here is my onclick function together with Ajax:这是我与 Ajax 一起使用的 onclick 函数：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

    $(document).ready(function(){
        $('#main tbody').on('click', 'td', function () {
            $irow = $(this).parent().index(); 
            $icol = $(this).index();
        console.log(" row and column: ");//to debug
        console.log($irow);//to debug
        console.log($icol);//to debug
        $.ajax({ 
           type: "POST", 
           url: "check_db.php", 
           data: { 'srow' : $irow,
               'scol' : $icol
               }, 
           success: function(data) {
                  alert(data);
                  console.log(data);
                  $("#view").load(" #view > *")
                  } 
                  }); 
        });
        });

 </script>
 
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>

And here is my code inside the div这是我在 div 中的代码


<body>
<h1>Welcome <?php echo $_SESSION["username"] ?> </h1>


<div id="view">

<?php
$sql = "SELECT username, row, col FROM seats";
$result = $link->query($sql);
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $outer_array[]=$row;//FILLING OUTER_ARRAY EACH ROW AS SEPERATE ARRAY.
      //  echo "<br>"."username: " . $row["username"]. " - row: " . $row["row"]. " col: " . $row["col"]. "<br>";
    }
}else{
    echo "0 results";
}
//======================Loop to create table starts from here!!!=================================
$nrows= 9; // Number of rows in table
$counter_row=0;//counter to use inside loop to match desired row value
$ncols=6;// Number of columns in table
$counter_col=0;//counter to use inside loop to match desired column value
echo '<table id = "main" style="width:100%"><tbody>';
for ($row = 0;$row<$nrows;$row++) {
    echo "<tr>";
    for ($col = 0;$col<$ncols;$col++) {
        for ($i = 0;$i<count($outer_array);$i++) {
                if (($outer_array[$i]['row']==$counter_row)&&($outer_array[$i]['col']==$counter_col)){
                    $uname = $outer_array[$i]['username'];
                    break;
                } else {$uname = "free";} 
        }
        if ($uname=="free"){
            echo "<td style = background-color:green;color:black>&nbsp;</td>"; 
        }elseif($uname!= $_SESSION["username"]) 
        { echo "<td style = background-color:yellow;color:black>$uname</td>";
        } else echo "<td style = background-color:orange;color:black>$uname</td>";
        $counter_col++;
        if($counter_col==$ncols){$counter_col=0;}//to reset counter column at the end of each row
    }
    echo "</tr>";
    $counter_row++;
}
echo '</tbody>';
echo '</table>';
?>
</div>

Answer 1

Use the first static element ( #view in your case) as your Event Delegator:使用第一个静态元素（在您的情况下为#view ）作为您的事件委托人：

$('#view').on('click', 'td', function () {

To explain further, since on AJAX success you rebuild the entire contents of your static #view , the TBODY in $('#main tbody') is a completely new element which does not delegates any more the initial click events.进一步解释一下，由于在 AJAX 成功时您重建了静态#view的全部内容， $('#main tbody')的 TBODY 是一个全新的元素，不再委托初始点击事件。

Ajax 重新加载后，onclick 功能不起作用<div>

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-08-27 16:22:38

Ajax 重新加载后，onclick 功能不起作用<div>

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-08-27 16:22:38

解决方案1
3 已采纳 2020-08-27 16:22:38