javascript - 为什么除非写在元素本身上,否则脚本不起作用?

标签 javascript jquery

我的文件位于同一文件夹中。当我对 html 文件本身或外部 script.js 文件运行 jQuery 命令时,没有任何反应。

但是当我直接在线路本身上进行查询时,它就可以工作。

我做错了什么?

<!--Nothing happens -->

<script src="jquery.js"></script>
    <script src="script.js"></script>
    <script>
        $( "para1" ).click(function() {
            $("para1").hide();
        });
    </script>

<body>
    <p id="para1">This is a paragraph</p>
</body>


<!-- Works -->

<body>
    <p id="para1" onclick="$(this).hide();">This is a paragraph</p> 
</body>

最佳答案

您正在尝试访问 HTML 文档,但该文档尚未创建。您的脚本在创建文档之前执行。

您必须等待创建 HTML 才能开始将 jquery 内容分配给节点。

您需要这样做:让我们定义一个在创建文档时要调用的函数:

<script>
    function document_created() {
        // your document is created now
        // you can assign your stuff:
        $( "#para1" ).click(function() {
            $("#para1").hide();
        });
    }
</script>

...现在让我们在创建文档时调用它。

如何知道文档何时创建?

使用jquery:

$(document).ready(document_created);

使用普通 DOM 事件:

<body onload="document_created()">

这称为“订阅事件”。您还可以订阅许多其他有趣的事件:页面卸载、窗口调整大小等......

此外,当您使用JQuery通过ID访问元素时,您需要在名称前面使用“#”。它可能按照您的方式工作,但不是很正确。所以:

$("#para1") ---> will access element with ID="para1" - ids are unique, so will be only one-
$(".para1") ---> will select elements with class "para1" - can be many-

关于javascript - 为什么除非写在元素本身上,否则脚本不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23317797/

相关文章:

javascript - 我们可以在悬停时使用相同的 jquery 功能两次,在单击时使用另一次吗?

jquery - 使用jquery随机显示一些东西

javascript - jQCloud - 如何清除它?

jquery - 是否有现有的库/插件来创建像 Visual Studio 中那样的可停靠、可调整大小和可固定的侧边栏窗口?

javascript - 如何通过 jQuery 将元素插入到现有 HTML 中?

php - 可以在 PHP 图像渲染脚本上执行 javascript 吗?

javascript - Meteor JS 报错

javascript - 一般创建一个新函数

javascript - 索引数组的自然排序对象

javascript - jQuery:.load() 方法替换目标选择器内容或附加到它?