Question

我试图使用JQuery隐藏HTML元素（一个h1标签）。它通过onClck（）事件调用我的函数时工作。但是当我尝试使用JQuery click（）方法隐藏h1元素时，它无法正常工作。我真的很困惑。

这是我的工作示例代码。

<html>
<head>
<script src="jquery-1.10.2.min.js"></script>

<script>
function hideMe(){
    $("#h1").hide("slow");
}
</script>

</head>

<body>

<h1 onClick="hideMe()" id="h1">Hello World</h1>

</body>
</html>

这是我的工作示例代码。

<html>
<head>
<script src="jquery-1.10.2.min.js"></script>

<script>
$("#h1").click(function(){
    $("#h1").hide("slow");
})
</script>

</head>

<body>

<h1 id="h1">Hello World</h1>

</body>
</html>

下载我的代码示例

http://dzine.us/download/jquery_confuced.zip

请帮我解释为什么上面的代码不起作用。三江源。

Answer 1

在添加事件侦听器之前，您需要确保DOM is fully loaded，并使用$(document).ready()执行此操作。或者简称：

$(function(){
    $("#h1").click(function(){
        $(this).hide("slow");
    })
})

而且仅供参考，因为点击函数由#h1调用，您可以使用$(this)而不是使用选择器重新创建jQuery集合。

Answer 2

您需要将绑定包装在DOMReady函数中，否则在评估脚本时您的元素不存在。

更新如下：

<script>
$(function() {
    $("#h1").click(function(){
        $("#h1").hide("slow");
    });
});
</script>

Answer 3

它必须在$(document).ready(function() {...})处理程序中，因为您必须首先加载DOM，然后才能执行jQuery代码（一旦加载DOM）。

$(document).ready(function() {
     $("#h1").click(function(){
         $("#h1").hide("slow");
     });
});

为什么JQuery click（）方法不起作用？

这是我的工作示例代码。

这是我的工作示例代码。

下载我的代码示例

3 个答案: