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

Posted 2023-02-22

【中文标题】JQuery 没有执行 - 但它正在加载？

【英文标题】：JQuery not executing - but it is loading?

【发布时间】：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"  ></td>';
        echo '<td><a href="../report.php?site='.$row['id'].'"><img src="../'.$row['thumb'].'"  ></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"  ></td>
                <td><a href="../report.php?site=2"><img src="../placeholder.jpg"  ></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"  ></td>
                <td><a href="../report.php?site=1"><img src="../placeholder.jpg"  ></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 - 不错的网站，欢迎大家指出！最后是脚本标签，但我很高兴我不是唯一一个忽略它的人！欢呼伙计们的帮助！

【参考方案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 的看法也是正确的——但我也对你投了赞成票！干杯！