Ajax load() 仅加载一次[重复]

Question

我有一个制作一些页面的学校项目，它必须从 mysql 中添加、删除、修改和排序数据。我需要刷新名为“jezdci”的第 3 节或只是其中的表格。我为此使用 load() 。但是它只加载一次，当我第二次点击它时，什么也没发生。然后我必须再次刷新页面。我需要一次又一次地加载它。有人知道，哪里出错了？ 你可以在http://188.75.190.236/host/xhrazd7/www/ZP%20Hrazdira/index1.php看到它

HTML：

 <section>
<?php  include "vypis.php"; ?>
 </section>

JS：

$(document).ready(function(){
    $(".serad > td").click(function(){
            y = $(this).index();          
            $("section:eq(2)").load("vypis.php",{
            serad:y      
            },);
         alert("Loaded index of td on click with value: "+y);     
    });
});

PHP：

 <?php
include "conn.php";
if(!empty($_POST["serad"])){
 $serad = $_POST["serad"];
  echo "<script>alert(\"variable succefully sended to PHP with value of \"+$serad);</script>";      
}else{
$serad=8;
}           

if($serad==0) $SQLprikaz = "SELECT * FROM ZP ORDER BY ID";
if($serad==1) $SQLprikaz = "SELECT * FROM ZP ORDER BY jmeno";
if($serad==2) $SQLprikaz = "SELECT * FROM ZP ORDER BY prijmeni";
if($serad==3) $SQLprikaz = "SELECT * FROM ZP ORDER BY vek";
if($serad==4) $SQLprikaz = "SELECT * FROM ZP ORDER BY bydliste";
if($serad==5) $SQLprikaz = "SELECT * FROM ZP ORDER BY ulice";
if($serad==6) $SQLprikaz = "SELECT * FROM ZP ORDER BY kategorie";
if($serad==7) $SQLprikaz = "SELECT * FROM ZP ORDER BY zaplaceno";
if($serad==8) $SQLprikaz = "SELECT * FROM ZP";      

$result = $conn->query("$SQLprikaz");
echo "<table>";
echo"<tr class=\"serad\">  <td><p>Pořadí</p></td>  <td><p>Jméno</p></td>  <td><p>Příjmení</p></td>  <td><p>Věk</p></td>  <td><p>Bydliště</p></td> <td><p>Ulice</p></td> <td><p>Kategorie</p></td> <td><p>Zaplaceno</p></td>  </tr>";
while($zaznam=$result->fetch_array(MYSQLI_NUM)){
echo"<tr>  <td>$zaznam[0]</td>  <td>$zaznam[1]</td>  <td>$zaznam[2]</td>  <td>$zaznam[3]</td>  <td>$zaznam[4]</td>  <td>$zaznam[5]</td>  <td>$zaznam[6]</td>  <td>$zaznam[7]</td>  </tr>";

}
echo "</table>"; 
 ?>

对不起我糟糕的英语：D PS：Když 由 se tu našel někdo hodný z Česka nebo Slovenska a měl chvíli času, budu rád, když mě zkontaktujete。 Dík

Answer 1

正如 haï_uit 所说，这是因为下一张桌子没有附加任何事件。您可以通过定位始终在页面中的元素并使用 on 方法来解决此问题，如下所示：

$(document).ready(function(){
    $("body").on("click", ".serad > td", function(){
        y = $(this).index();          
        $("section:eq(2)").load("vypis.php",{
        serad:y      
        },);
        alert("Loaded index of td on click with value: "+y);     
    });
});

Answer 2

问题就在这里：

$(document).ready(function(){
    $(".serad > td").click(function(){
        y = $(this).index();          
        $("section:eq(2)").load("vypis.php",{
        serad:y      
        },);
        alert("Loaded index of td on click with value: "+y);     
    });
});

成功加载 ajax 后，将“td”附加到点击事件的旧表替换为没有“td”和点击事件的新表。因此，在您的 ajax 加载功能中，您必须在加载成功后再次为您的表添加点击事件。另一种解决方案是只替换数据行，而不是整个表。

第一个选项，你可以再次添加点击事件：

$(document).ready(function(){
    var tabs = $('.serad > td');
    tabs.click(changeTabs);
    function changeTabs() {
        y = $(this).index();
        $('section:eq(2)').load('vypis.php',{
        serad:y      
        }, function () {
            tabs = $('.serad > td');
            tabs.click(changeTabs);
        });
    }  
}

第二个选项，只加载表格内容：

将您的 html 文件更改为：

<section>
    <table>
        <tbody id="tabs">
            <tr class="serad">
                <td>
                    <p>Pořadí</p>
                </td>
                <td>
                    <p>...</p>
                </td>
           </tr>
        </tbody>
        <tbody id="content">
           <?php  include "vypis.php"; ?>
        </tbody>
    </table>
</section>

在 php 文件中，只回显行：

while($zaznam=$result->fetch_array(MYSQLI_NUM)){
    echo"<tr>  <td>$zaznam[0]</td>  <td>$zaznam[1]</td>  <td>$zaznam[2]</td>     <td>$zaznam[3]</td>  <td>$zaznam[4]</td>  <td>$zaznam[5]</td>  <td>$zaznam[6]</td>  <td>$zaznam[7]</td>  </tr>";
}

最后，在你的脚本中：

$(document).ready(function() {
    $('.serad > td').click(function () {
        y = $(this).index();
        $.post('vypis.php', { serad: y }, function (response) {
            $('#content').html(response);
        });
    });
});