我遇到了一种情况，我正在对数据库进行 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 执行“查看源代码”时，除了表格和数据之外，我看到了所有内容，但表格和数据清晰地显示在屏幕上。
这很重要，只是为了帮助该项目，但对我来说更重要的是了解正在发生的事情。例如，是否有一些基本的东西，例如:
- 不，蒂姆，用 Javascript 编写的表格无法点击，请使用 PHP! (听起来很奇怪)。
- Tim，当你用 Javascript 编写表格时，你必须执行 x、y 和 z! (可能)。
- 不，蒂姆，您不能使用“.html”在 Javascript 中移动数据，您必须使用“X”。
- 还有其他事情
昨天我了解了 jQuery dataTables 库(以及许多其他库)，这可能会为我提供不同的途径，但我宁愿了解此代码中的问题。
(P.S.并再次感谢@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>
最佳答案
由于您的表是动态添加的，因此您需要对事件使用事件委托(delegate)。您将处理程序绑定(bind)到 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.
});
});
关于javascript - 用 Javascript 编写的表在屏幕上可见，但在 "view source"中不可见，且行不可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17426995/