javascript - 运行 Ajax 更改表的顺序后，返回的表上的其他 jQuery 函数未执行

Question

当用户单击表格第一行中的标题时，我使用 Ajax 更改表格的顺序。第二个函数在任何列的顺序更改之前执行，但是，在用户单击标题，然后单击最后两列中任一列中的单元格后，不会出现任何警报。我从 PHP 返回一个与初始表具有相同 ID 和类的表，因此我不确定为什么 jQuery 函数无法识别单击。

$(document).on('click', '.column_sort', function () {
    var column_name = $(this).attr("id");
    var order = $(this).data("order");
    $.ajax({
        url: "../table.php",
        method: "POST",
        data: {column_name: column_name, order: order},
        success: function (data) {
            $('#populate_table').html(data);
        }
    });
});

$('table .row td:nth-child(4), td:nth-child(5)').click(function () {
    var vote_up = $(this).parent().index();
    alert(vote_up); // this works before Ajax. Does not work after
});

这是与上述 Ajax 交互的 php，用于查询我的数据库并更改列的顺序。

<?php

include 'database.php'; // include database connection file
$output = '';
$order = $_POST["order"];
if ($order == 'desc') {
    $order = 'asc';
} else {
    $order = 'desc';
}
$query = "SELECT user, gender, description, up_votes, down_votes FROM 
table_name ORDER BY " . $_POST["column_name"] . " " . $_POST["order"] . " ";
$result = mysqli_query($con, $query);
$output .= '  
 <table>
      <tr class="row">
           <td><a class="column_sort" id="user" data-order="' . $order . '" href="#" onclick="return false;">User</a></td>  
           <td><a class="column_sort" id="gender" data-order="' . $order . '" href="#" onclick="return false;">Gender</a></td>
           <td><a class="column_sort" id="description" data-order="' . $order . '" href="#" onclick="return false;">Description</a></td>
           <td><a class="column_sort" id="up_votes" data-order="' . $order . '" href="#" onclick="return false;"><img class="vote" src="Gender/images/table/up.png" alt="up-vote"></a></td>  
           <td><a class="column_sort" id="down_votes" data-order="' . $order . '" href="#" onclick="return false;"><img class="vote" src="Gender/images/table/down.png" alt="down-vote"></a></td>  
      </tr>';
    while ($row = mysqli_fetch_array($result)) {
            $output .= '  
          <tr class="row">
               <td>' . $row["user"] . '</td>
               <td>' . $row["gender"] . '</td>
               <td>' . $row["description"] . '</td>
               <td>' . $row["up_votes"] . '</td>
               <td>' . $row["down_votes"] . '</td></tr>';
    }
$output .= '</table>';
echo $output;

?>

最后是 HTML。

<div id="populate_table">
    <table>  
        <tr class="row">  
            <td><a class="column_sort" id="user" data-order="desc" href="#" onclick="return false;">User</a></td>
            <td><a class="column_sort" id="gender" data order="desc" href="#" onclick="return false;">Gender</a></td>
            <td><a class="column_sort" id="description" data order="desc" href="#" onclick="return false;">Description</a></td>
            <td><a class="column_sort" id="up_votes" data order="desc" href="#" onclick="return false;"><img class="vote" src="Gender/images/table/up.png" alt="up-vote"></a></td>
            <td><a class="column_sort" id="down_votes" data order="desc" href="#" onclick="return false;"><img class="vote" src="Gender/images/table/down.png" alt="down-vote"></a></td>
        </tr>  
        <?php
        while ($row = mysqli_fetch_array($result)) {
            ?>
            <tr class="row">  
                <td><?php echo $row["user"]; ?></td>  
                <td><?php echo $row["gender"]; ?></td> 
                <td><?php echo $row["description"]; ?></td> 
                <td><?php echo $row["up_votes"]; ?></td>  
                <td><?php echo $row["down_votes"]; ?></td>  
            </tr>  
            <?php
        }
        ?>  
    </table>
</div>

Answer 1

您必须将 .click(...) 更改为:

$(document.body).on('click', 'table .row td:nth-child(4), td:nth-child(5)', function() {
     ...
});