Ajax load() 只加载一次

Question

我有一个制作一些页面的学校项目，它必须添加、删除、修改和排序来自 mysql 的数据。我需要刷新名为 "jezdci" 的第 3 部分或其中的 table。我为此使用 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ž by 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

问题在这里:

$(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 加载成功后，您的旧 table 有 "td" 附加到点击事件被替换为没有 [=29] 的新 table =] 与点击事件。所以在你的 ajax 加载函数中，你必须在加载成功后再次为你的 table 添加点击事件。另一种解决方案是只替换数据行，而不是整个 table.

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

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

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

将您的 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);
        });
    });
});

Answer 2

正如 haï_uit 提到的那样，这是因为没有事件附加到下一个 table。您可以通过定位一个始终位于页面中的元素并使用 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);     
    });
});

Ajax load() 只加载一次

Ajax load() loads only once

javascript

php

mysql

jquery

load