0

我有一种情况，我正在对数据库进行 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 执行“查看源代码”时，我看到了除了表格和数据之外的所有内容，但表格和数据清晰地显示在屏幕上。

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

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

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

（PS 并再次感谢 @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>
4

1 回答 1

3

由于您的表是动态添加的，因此您需要对事件使用事件委托。您将处理程序绑定到在 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.
    });
});
于 2013-07-02T13:35:09.093 回答