Question

我不能在标题中使用脚本，这是代码：

<!DOCTYPE html>
<html>
<head> 

<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <a href="javascript:void" class="sl-start">Click Here</a> 
<p class="slide" style="display: none">Something to display</p>

<script>
    $(".sl-start").click(function () {
    $(".slide").show();
    });
    </script>
</body>
</html>

Answer 1

将您的代码包装在document.ready事件处理程序中，如下所示：

<!DOCTYPE html>
<html>
<head> 

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
        $(document).ready(function(){
            $(".sl-start").one('click', function () {
                $(".slide").show();
            });
        });
    </script>
</head>
<body>
 <a href="javascript:void" class="sl-start">Click Here</a> 
<p class="slide" style="display: none">Something to display</p>

</body>
</html>

否则，脚本将在元素存在之前执行！

Answer 2

因为DOM尚未准备就绪，无法附加事件。

如果你在document的就绪事件发生时启动它就会运行：

$(document).ready(function(){
    $(".sl-start").click(function () {
        $(".slide").show();
    });
});

Answer 3

如果你想在＆lt; head＆gt;中使用它区域然后你必须使用$（document）.ready（）事件。

<script type="text/JavaScript">
    $(document).ready(function() {
        $(".sl-start").click(function () {
            $(".slide").show();
        });
    });
</script>

或简写：

$(function() {
    ...
});

因为在之后>触发了$（document）.ready（）事件，所以读取了HTML / CSS文档。这意味着浏览器已经知道完整内容＆amp; HTML文档的结构。

否则HTML结构不可用（尚未完全读取），因此您的jQuery调用将无法找到任何对象。

为什么我不能在标题中使用它？

3 个答案: