blocks|key|3280552|text|请记住，只有在文档加载完成后才能加载脚本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3280553|$(function(){
++/*+Scripts+here+will+run+only
+++++after+the+document+has+loaded+*/
});|code-block|syntax|javascript|3280554|此外，在使用链接触发操作时，请务必对链接进行prevent+the+default+behavior：|offset|length|3280555|$(function(){
++$("#sh").click(function(e){
++++e.preventDefault();
++++$("#container").show();
++});
});|3280556|有了这些更改，代码就可以正常工作了：http://jsfiddle.net/apsje/|3280557|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/event.preventDefault/|1|http://jsfiddle.net/apsje/^0|0|0|M|S|0|0|0|I|Q|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@$I|11|J|12|1|13]]|A|$]]|$1|K|3|L|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|15|8|@]|9|@$I|16|J|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

A few things to keep in mind, load the scripts only after the document has finished loading:

<pre><code>$(function(){
 /* Scripts here will run only
 after the document has loaded */
});
</code></pre>

Also, be sure to <a href="http://api.jquery.com/event.preventDefault/" rel="nofollow">prevent the default behavior</a> of links when using them to trigger actions:

<pre><code>$(function(){
 $("#sh").click(function(e){
 e.preventDefault();
 $("#container").show();
 });
});
</code></pre>

With these changes, the code works as expected: <a href="http://jsfiddle.net/apsje/" rel="nofollow">http://jsfiddle.net/apsje/</a>

blocks|key|3280382|text|将您的jquery代码添加到|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3280383|$(document).ready(function()+{

...

});|code-block|syntax|javascript|3280384|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

add your jquery code between this

<pre><code>$(document).ready(function() {

...

});
</code></pre>

blocks|key|1960604|text|使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1960605|因为如果您在调用真正的HTML之前调用脚本，那么您引用的元素还不存在。|1960606|$(document).ready(+function()+{
++++$('#sh').click(function(){
++++$('#container').show();
})|code-block|syntax|javascript|1960607|通过在$(document)上使用ready事件，您可以确保DOM已完全加载并准备好与之交互。|1960608|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Use this:

Because if you call your script before the real HTML, the elements you're referring to doesn't exist yet.

<pre><code>$(document).ready( function() {
 $('#sh').click(function(){
 $('#container').show();
})
</code></pre>

By using the ready event on $(document), you make sure the DOM is completely loaded and ready to be interacted with.

blocks|key|1215014|text|当您绑定单击时，浏览器尚未呈现#sh。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1215015|尝试以下操作：|1215016|$(document).ready(function()+{
++$('#sh').click(function(){
++++$('#container').show();

++});
});|code-block|syntax|javascript|1215017|它在文档加载后绑定点击。|1215018|entityMap^0|F|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

The browser has not yet rendered #sh when you are binding the click.

Try the following:

<pre><code>$(document).ready(function() {
 $('#sh').click(function(){
 $('#container').show();

 });
});
</code></pre>

It binds the click after the document has loaded.

blocks|key|1215046|text|在元素出现在DOM中之前，您的代码正在运行。您的脚本块应该如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1215047|<script+type="text/javascript">
++$(+function()
++{
++++$(+'#sh'+).click(+function()
++++{
++++++$(+'#container'+).show();
++++}+);
++}+);
</script>|code-block|syntax|javascript|1215048|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Your code is running before the elements are present in the DOM. Your script block should look like:

<pre><code>&lt;script type="text/javascript"&gt;
 $( function()
 {
 $( '#sh' ).click( function()
 {
 $( '#container' ).show();
 } );
 } );
&lt;/script&gt;
</code></pre>

blocks|key|3280533|text|或者将脚本放在</body>之前|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3280534|entityMap^0|7|7|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Or place the script before <code>&lt;/body&gt;</code>

blocks|key|3280559|text|$(document).ready(function(){
++++$('#sh').click(function(){
++++++++$('#container').show();

++++});
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3280560|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(document).ready(function(){
 $('#sh').click(function(){
 $('#container').show();

 });
});
</code></pre>

<pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready({
$('#sh').click(function(){
$('#container').show();

});
});
&lt;/script&gt;
&lt;style type="text/css"&gt;
#container {
width:350px;
height:350px;
border:1px solid #000000;
display:none;
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
&lt;p&gt;paragraph 1&lt;/p&gt;
&lt;/div&gt;

&lt;div&gt;
&lt;a href="#" id="sh"&gt;show&lt;/a&gt;

&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

clicking on link doesn't trigger .show() at all!
What am i doing wrong??
Update: i tried $(document).ready({... it doesn't help!

.show() doesn't show!

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

问.show()没有显示！
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问.show()没有显示！EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问.show()没有显示！
EN