用 Javascript 编写的表格在屏幕上可见，但不在“查看源代码”中且行不可点击答案

【问题标题】：Table written in Javascript visible on the screen, but not in "view source" and rows not clickable用 Javascript 编写的表格在屏幕上可见，但不在“查看源代码”中且行不可点击
【发布时间】：2017-12-18 02:07:09
【问题描述】：

我有一种情况，我正在对数据库进行 ajax 调用，并返回数据。数据以表格格式进入 div，我希望这些行可以点击。这是一个每天在网络上执行数十亿次的简单过程（通过姓氏部分匹配在数据库中查找人）。

在项目的其他五个页面上，从数据库读取信息、将其发布到屏幕上以及单击行以重定向到新页面都没有问题。不同的是，那些页面都是用 PHP 写在页面上的。这个有问题的特定页面必须用 javascript 编写，因为我要求用户输入姓氏中的一两个字母，进行 ajax 调用并填充 div。

这里是调用和写入数据的代码：

$.ajax({
  type: "POST",
  url: "findpatientbackend.php",
  data: {letterslastname: lastname},
  dataType : 'json',
  success: function(result) {
     $("#div1").html(""); //make the div blank
     if(result.length >= 1)
       {var output = "";
       $("div1").html("<table id='findtable'>");
       $.each(result, function(index, value) {
            output += "<tr><td width='100px'></td><td id='localid' width='100px'>"
            + value.localid + "</td><td width='100px'>"
            + value.lastname + "</td><td width='100px'>"
            + value.firstname + "</td><td width='100px'>"
            + value.middlename + "</td><td width='100px'>"
            + value.dob + "</td></tr>";
               });
        $("#div1").html(output);
        $("div1").html("</table>");         
        }
         else
        {$("#div1").html("No matches");}
        },
        error : function() { alert("error on return"); }
    });
    });

这里是“点击”行的代码（在其他五种情况下可以正常工作）：

$("#findtable tr").click(function() {
   var passthis = $(this).find("#localid").html();
   $.post("php/setsessionvariable.php",
   {sessionval: passthis},
     function(e) {window.location.href = '../root.php'}
          );

我玩过这个，似乎 .click 函数看不到 'id='findtable''，我已经尝试了一切 - 从 id 更改为 class，单引号，双引号，移动和的位置 - 我能想到的一切。当我使用 IE 执行“查看源代码”时，我看到了除了表格和数据之外的所有内容，但表格和数据在屏幕上清晰可见。

这很重要，只是为了帮助项目，但对我来说更重要的是了解正在发生的事情。例如，是否有一些基本的东西：

No Tim，用 Javascript 编写的表格无法点击，请使用 PHP！（听起来很奇怪）。
Tim，当你用 Javascript 编写表格时，你必须做 x、y 和 z！（可能）。
不，Tim，您不能使用“.html”在 Javascript 中移动数据，您必须使用“X”。
别的东西

昨天我了解了 jQuery dataTables 库（以及许多其他库），这可能会为我提供不同的途径，但我更愿意了解这段代码中的问题。

（附注并再次感谢 @Shaddow 帮助我使用 .each 命令 - 非常好！）

这是细分：

$(document).on(
               "click",
             "#findtable td",
             (function() {
                            var passthis = $(this).find("#localid").html();
                            $.post("php/setsessionvariable.pphp",
                                   {sessionval: passthis},
                                   function(e) { window.location.href = '../root.php'; }
                                   );
                            });
                );

这里是纯 Javascript 表的代码，它实际上允许 .click 函数工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>

<style>
#findtable {
    width:200px;
    background-color:#CFD3FE;
    margin:10px auto;
    text-align:center;}
</style>

<body>

<div id="puttablehere"></div>

<script>
$(document).ready(function () {

var output = "<table id='findtable'>";
for (var i = 0; i<38; i++)
{output += "<tr><td width='100px'>X</td><td id='localid' width='100px'>X</td></tr>";}
output += "</table>";

$("#puttablehere").html(output);

$("#findtable tr").click(function(e) { alert("it works!"); });

});
</script>

</body>
</html>

【问题讨论】：

tldr; Firefox 有一个选项来查看生成的源代码。这可能有助于您的诊断。
"这个特定页面必须用 javascript 编写，因为..." - 实际上，您可以修改 findpatientbackend.php 以返回实际的 HTML，而不仅仅是值列表。然后你的 javascript 只需要将返回的 HTML 块插入到 DOM 中。
@TecBrat - 我没有使用过 Firefox，但我肯定会尝试一下。谢谢！
@mbeckish - 非常有趣的想法 - 我可能会试一试，因为我从来没有通过回调将 HTML 从服务器传递到客户端 - 听起来像是我需要的“工具”。谢谢！

标签： javascript ajax html-table clickable

【解决方案1】：

由于您的表格是动态添加的，因此您需要对事件使用事件委托。您将处理程序绑定到在 DOM 就绪时不存在的元素：

$(document).on("click", "#findtable td", function() {
    var passthis = $(this).find("#localid").html();
    $.post("php/setsessionvariable.php", {sessionval: passthis}, function(e) {
        window.location.href = '../root.php'; //I removed the } from here.
    });
});

【讨论】：