jQuery 不适用于通过 PHP 回显的元素答案

【问题标题】：jQuery doesn't work on elements echoed via PHPjQuery 不适用于通过 PHP 回显的元素
【发布时间】：2011-08-21 15:19:57
【问题描述】：

我所拥有的是一个 PHP 代码，它从 mysql 数据库生成一个 html 表，然后我尝试使用一个 jQuery 插件来使表可排序。我已经多次遇到这个问题，似乎无法在任何地方找到解决方案......为什么 jQuery（或者它是 Javascript 时期？）不能在 PHP 输出上工作？没有办法解决这个问题吗？

代码如下：

<html><head>
<title>MySQL Table Viewer</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
<script>
$(document).ready(function() 
{ 
    $("#mytable").tablesorter(); 
} 
); 
</script>
</head><body>
<?php
$db_host = 'localhost';
$db_user = 'root';
$db_pwd = 'lptm42b';

$database = 'sphinx';
$table = 'spheres';

if (!mysql_connect($db_host, $db_user, $db_pwd))
die("Can't connect to database");

if (!mysql_select_db($database))
die("Can't select database");

// sending query
$result = mysql_query("SELECT * FROM {$table}");
if (!$result) {
    die("Query to show fields from table failed");
}

$fields_num = mysql_num_fields($result);

echo "<h1>Table: {$table}</h1>";
echo "<table id=\"mytable\" border='1'><tr>";
// printing table headers
for($i=0; $i<$fields_num; $i++)
{
    $field = mysql_fetch_field($result);
    echo "<td>{$field->name}</td>";
}
echo "</tr>\n";
// printing table rows
while($row = mysql_fetch_row($result))
{
    echo "<tr>";

    // $row is array... foreach( .. ) puts every element
    // of $row to $cell variable
    foreach($row as $cell)
        echo "<td>$cell</td>";

    echo "</tr>\n";
}
mysql_free_result($result);
?></table>
</body>
</html>

输出是：

<html><head>

<script src="../js/jquery_plugin.tablesorter.min.js"></script>

<script src="../js/jquery-1.6.min.js"></script>

<script src="../js/jquery_plugin.tablesorter.pager.js"></script>

<title>MySQL Table Viewer</title></head><body>

<h1>Table: lobby</h1><table id="mytable" border='1'><thead><tr><td>tableid</td>    <td>name</td><td>datecreated</td><td>active</td></tr></thead> 
<tbody><tr><td>12341231241</td><td>Oyunum1</td><td>2011-05-09 14:26:51</td><td>0</td>    </tr> 
<tr><td>6677768</td><td>m2</td><td>2011-05-05 14:26:39</td><td>1</td></tr> 
<tr><td>ddf1</td><td>m3</td><td>2011-05-09 14:27:19</td><td>0</td></tr> 
<tr><td>7856844444</td><td>m4</td><td>2011-05-09 14:27:31</td><td>0</td></tr> 
<tr><td>xxxxde4rfd</td><td>m5</td><td>2011-05-09 14:27:43</td><td>0</td></tr> 
</tbody></table>

</body></html>

<script>

$(document).ready(function() 

{ 

    $("#mytable").tablesorter(); 

} 

); 

</script>

更新：由于某种原因，chrome 视图源中的 end / script> 标记丢失了语法着色

【问题讨论】：

会报错吗？你用的是什么浏览器？
不要echo HTML。并且：echo "<table id="mytable" border='1'><tr>"; 应该抛出一个语法错误。可以看到代码高亮显示存在引用问题。
您忘记关闭您的<table>。
还是错了。你正在做的是回显字符串"<table id=" 然后有一些未定义的常量mytable 和另一个字符串" border='1'><tr>"。
您的脚本标签不在<html></html> 标签内。把它放在head里面。

标签： php jquery mysql html-table

【解决方案1】：

tablesorter 插件需要表中的 THEAD 和 TBODY 标签才能工作

【讨论】：

添加了这些标签，仍然不起作用..为什么会这样？我已经添加了输出
@Logan：标题应该有标题标签的 TH 标签而不是 TD。尝试替换这些，它可能会起作用。

【解决方案2】：

您没有提供#mytable 元素。

您需要使用与实际存在的元素匹配的选择器。

编辑：您的 PHP 有错误嵌套的引号，因此 ID 实际上不在字符串中。
查看页面源代码。

【讨论】：

对不起，这是一个错字，我复制粘贴的方式不同

【解决方案3】：

您应该使用“mytable”添加表的 ID。

在使用 JQuery 时，也总是将 thead、tbody 放在 table 标记中以获得更好的输出。

【讨论】：

在使用 JQuery 时，也总是将 thead、tbody 放在表标签中以获得更好的输出。 为什么？

【解决方案4】：

迟到了，但你需要知道，如果 html 是在最初加载 dom 之后生成的，document.ready 不会获取动态生成的 html。有 jQuery 插件可以解决这个问题（liveQuery 就是其中之一），但是 Document.Ready 事件会在每次页面加载时触发一次，如果生成 html 的 PHP 在那之后触发，那么您调用的 tablesorter 方法没有什么可做的排序。

【讨论】：

【解决方案5】：

Javascript 是一种客户端技术，意思是让它与服务器通过 php 直接生成的元素一起工作，这涉及到一些体操。

尝试阅读 PHP 和一般 ajax 调用中的 json_encode() 函数。

另外，您可能对 .delegate() jQuery 方法感兴趣。

【讨论】：

不正确。 Javascript 适用于 DOM 元素。 DOM 元素是否由 PHP 回显、由 ASP 响应.Write'd 或其他什么都没关系。如果存在 html 元素，则可以使用 javascript 与该 html 进行交互。我认为这里的问题是何时将 html 写入客户端。