Question

我有3个页面：index.php，主页update.js和update.php。

我有index.php的表格。我使用update.js和update.php通过AJAX从数据库更新表。

问题是在更新之后，表中没有任何内容响应jQuery选择器。

以下是代码：

的index.php

<html>
<head>
  <title>Hello!</title>
  <script src="jquery-2.0.3.min.js"></script>
  <script src="update.js"></script>
  <style>
    img#pageloading
    {
        display: none;
        position: fixed;
        padding-top: 350px;
        padding-left: 50%;
    }
  </style>
</head>
<body>
<table border="1">
<thead>
<th>first</th>
<th>second</th>
<th>third</th>
</thead>
<?php
for($i=1;$i<=3;$i++)
{
    ?>
    <tr id="row<?=$i;?>">
    <td>first<?=$i;?></td>
    <td>second<?=$i;?></td>
    <td>third<?=$i;?></td>
    </tr>
    <?php
}
?>
<img src="../submit/loading.gif" id="pageloading" />
</table>
<button id="update">update</button>
</body>
</html>

update.js

$(document).ready(function(){
    $("#update").click(function(){
        $("img#pageloading").css("display", "inline");
        $("#row1").load("update.php", function () {
            $("img#pageloading").css("display", "none");
        });
    });
    $(".update2").click(function(){
        alert("button update2");
    });
});

update.php

<td>first4</td>
<td>second4</td>
<td><button class="update2">third4</button></td>

Answer 1

您正在使用ajax加载元素，因此您需要委派的事件处理程序

$(document).ready(function(){
    $("#update").click(function(){
        $("img#pageloading").css("display", "inline");
        $("#row1").load("update.php", function () {
            $("img#pageloading").css("display", "none");
        });
    });
    $("#row1").on('click', ".update2", function(){
        alert("buttong update2");
    });
});

AJAX创建的项不响应jQuery选择器

1 个答案: