表不响应第二个 jQuery 请求

Question

我的 PHP 脚本会生成一个表格，其中包含可以选择编辑或删除的行。也有可能创建一个新行。 PHP 是通过 jQuery 事件激活的。

现在一切正常，我可以编辑删除并创建一个项目。在使用 PHP 脚本的每个操作之后，HTML 表都会更新。

但是当我在一个事件之后再次尝试执行一个操作时，HTML 表没有得到更新，尽管 PHP 脚本在后台进入数据库。

你们中有人知道为什么我的 HTML 表格在我触发第二个事件时不会自行更新吗？

这是脚本：

PHP

<?php
  require_once "../../includes/constants.php";
  // Connect to the database as necessary
  $dbh = mysql_connect(DB_SERVER,DB_USER,DB_PASSWORD)
    or die ("Unaable to connnect to MySQL");

  $selected = mysql_select_db(DB_NAME,$dbh)
    or die("Could not select printerweb");

   $action = $_POST['action'];
   $name = $_POST['name'];
   $id = $_POST['id'];

    if($action == "new")
      {
        mysql_query("INSERT INTO `place` (`id`, `name`) VALUES (NULL, '$name')");
      }
    elseif($action == "edit")
      {
        mysql_query("UPDATE `place` SET `name` = '$name' WHERE `id` = '$id'");        
      }
    elseif($action == "delete")
      {
        mysql_query("DELETE FROM place WHERE id = '$id'");
      }

    echo "<table><tbody>";
    $result = mysql_query("SELECT * FROM place");
    while ($row = mysql_fetch_array($result)) {
      echo "<tr><td id=".$row["id"]." class=inputfield_td><input class=inputfield_place type=text value=".$row["name"]." /></td><td class=place_name>".$row["name"]."</td><td class=edit>edit</td><td class=cancel>cancel</td><td class=delete>delete</td><td class=save>SAVE</td></tr> \n";
    }
    echo "</tbody>";
    echo "</table>";
    echo "<input type=text class=inputfield_visible />";
    echo "<button class=new>Neu</button>";
?>

JS

$(function() {
  $.ajax({
  url: "place/place_list.php",
  cache: false,
  success: function (html){
    $("#place_container").append(html);
      }
  });
  $(".edit").live("click", function() {
    $(this).css("display","none").prevAll(".place_name").css("display","none").prevAll(".inputfield_td").css("display","block").nextAll(".cancel").css("display","block").nextAll(".save").css("display","block").prevAll(".inputfield_td").css("display","block");
  });
  $(".cancel").live("click", function() {
    myvariable5 = $(this).prevAll(".place_name").html();
    $(this).css("display","none").prevAll(".edit").css("display","block").prevAll(".place_name").css("display","block").prevAll(".inputfield_td").css("display","none").nextAll(".save").css("display","none").siblings().find("input[type=text]").val(myvariable5);
  });
  $(".save").live("click", function() {
    var myvariable1 = $(this).siblings().find("input[type=text]").val();
    var myvariable2 = $(this).prevAll("td:last").attr("id");
    $(this).css("display","none").prevAll(".cancel").css("display","none").prevAll(".edit").css("display","block").prevAll(".place_name").css("display","block").prevAll(".inputfield_td").css("display","none");
    $.post("place/place_list.php", {action: "edit", name: ""+myvariable1+"", id: ""+myvariable2+""}, function (html){$("#place_container").replaceWith(html);});
  });
  $(".delete").live("click", function() {
    var myvariable3 = $(this).prevAll("td:last").attr("id");
    $.post("place/place_list.php", {action: "delete", id: ""+myvariable3+""}, function (html){$("#place_container").replaceWith(html);});
  });
  $(".new").live("click", function() {
    var myvariable4 = $(this).prevAll("input[type=text]").val();
    $.post("place/place_list.php", {action: "new", name: ""+myvariable4+""}, function (html){$("#place_container").replaceWith(html);});
  });
}); 

Answer 1

我想我知道。您使用 replaceWith 而不是 append，因此 ID #place_container 的 DIV 在第一次操作后消失（您的页面中只剩下一个表格），当然jQuery 没有找到它，并且无法使用第二次操作中的新内容刷新它。

只需使用 append 或者更好的是 html 方法。

Answer 2

你不应该替换整个表吗？

$("#place_container").html(html);