JQuery 未执行 - 但正在加载？

Question

我对非常简单的 JQuery 代码有点问题 - 我一直在通过以下方式进行故障排除：

1. 将 JQuery 代码移至文档末尾
2. 使用 google 托管的 JQuery 和本地托管
3. 使​​用 $(document) .ready - 并且无需
4. 通过取出 PHP 生成的代码，将其插入 HTML 文档并在没有 PHP 的情况下尝试
5. 使用 firebug 插入代码来简化它 - 注意：这实际上完美地工作

这是 JQuery 代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script language="text/javascript">
$(document).ready( function(){
    $('.del').click(function() {
        alert(this.id);
    });
});
</script>

这是PHP 代码：

    while($row = mysql_fetch_array($reports)){
        echo '<tr><th>'.$row['title'].'</th>';
        echo '<td><a href="modify.php?site='.$row['id'].'">Modify</a></td>';
        echo '<td> <img class="del" id="'.$row['id'].'" src="../right_place.jpg" width="75" height="75"></td>';
        echo '<td><a href="../report.php?site='.$row['id'].'"><img src="../'.$row['thumb'].'" width="75" height="75"></a></td></tr>';
    }

生成这种 HTML：

            <tr>
                <th>Site 2</th>
                <td><a href="modify.php?site=2">Modify</a></td>
                <td><img class="del" id="2" src="../right_place.jpg" width="75" height="75"></td>
                <td><a href="../report.php?site=2"><img src="../placeholder.jpg" width="75" height="75"></a></td>
            </tr>

            <tr>
                <th>Site 1</th>
                <td><a href="modify.php?site=1">Modify</a></td>
                <td><img class="del" id="1" src="../right_place.jpg" width="75" height="75"></td>
                <td><a href="../report.php?site=1"><img src="../placeholder.jpg" width="75" height="75"></a></td>
            </tr>

我目前已在 Google Chrome 和 Internet Explorer 中尝试过。最有趣的方面是，如果我将 JQuery 代码复制并粘贴到 firebug 中，它会完美执行并且没有错误？！然而，当它在页面中时，它不会执行。 （因此我尝试将代码放在页面底部的原因之一！）

注意：JQuery 代码也为了调试/测试目的而进行了简化 - 实际上，它会在对 AJAX 调用之前提示用户进行确认执行 MySQL 查询的 PHP 脚本。

Answer 1

这里有一些问题。

1).不要使用数字 ID。 ID 必须以字母开头。

2）。您的脚本标记不正确，使用语言说明符而不是类型说明符。它应该是：

<script type="text/javascript">

修复这个问题，它应该可以工作。

Answer 2

只要删除 language="text/javascript" 就可以了

Answer 3

尝试将您的文档准备功能更改为：

$(document).ready( function(){
    $('.del').live('click', function() {
        alert(this.id);
    });
});

Answer 4

我将使用 delegate() 方法：

$(function() {

    $("img").delegate(".del", "click", function() {
        alert(this.id);
    });

});