JQuery 没有执行 - 但它正在加载？答案

【问题标题】：JQuery not executing - but it is loading?JQuery 没有执行 - 但它正在加载？
【发布时间】：2011-08-27 13:11:30
【问题描述】：

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

将 JQuery 代码移动到文档末尾
使用 google 托管的 JQuery 和本地托管
使用 $(document).ready - 和不使用
通过取出 PHP 生成的代码，将其插入 HTML 文档并尝试不使用 PHP 来简化它
使用 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 代码也进行了简化 - 实际上，它会在对执行 MySQL 查询的 PHP 脚本进行 AJAX 调用之前提示用户进行确认。 p>

【问题讨论】：

它在this jsFiddle 完美运行，一定与您的PHP 代码有关。我也为您的图片添加了 alt 属性，以便我们可以点击。
我刚刚测试过它并且它可以工作（jsfiddle.net/9YdTv - 虽然我将图像更改为跨度，所以我有一些东西可以点击）。您的 PHP 代码是通过 AJAX 加载的吗？如果是这样，您将需要使用 live() 或 delegate() 方法来连接事件。
我以前从未见过 jsFiddle - 不错的网站，欢迎大家指出！最后是脚本标签，但我很高兴我不是唯一一个忽略它的人！欢呼伙计们的帮助！

标签： php javascript jquery html dom

【解决方案1】：

尝试将您的文档就绪功能更改为：

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

【讨论】：

【解决方案2】：

我会使用 delegate() 方法：

$(function() {

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

});

【讨论】：

【解决方案3】：

这里有几个问题。

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

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

<script type="text/javascript">

修复它，它应该可以工作。

【讨论】：

顺便说一句，我实际上为你测试了我的解决方案:)，是的......我的作品。 javascript 根本没有使用旧的脚本标记执行。
为什么不使用数字 ID？我在我的项目中使用数字 id - 完全没有问题
@evgeniy.labusnkiy 他们违反了规范。您不能依赖它们跨浏览器工作。
@John - 我完成了超过 15 个大项目 - 从来没有任何问题
@evgeniy.labusnkiy |这就是规范合规性的重点。你总是可以用“通常”有效的东西来掷骰子......但你不能测试一切。这就是为什么您要编写规范并针对怪癖进行修改，而不是相反。

【解决方案4】：

只需删除 language="text/javascript" 即可使用

【讨论】：

问题是 type="text/javascript" 不在代码中。操作有 'language="text/javascript"'。
是的，我接受了约翰的回答，因为他对数字 ID 的看法也是正确的——但我也对你投了赞成票！干杯！