.show() doesn't show!
Question
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready({
$('#sh').click(function(){
$('#container').show();
});
});
</script>
<style type="text/css">
#container {
width:350px;
height:350px;
border:1px solid #000000;
display:none;
}
</style>
</head>
<body>
<div id="container">
<p>paragraph 1</p>
</div>
<div>
<a href="#" id="sh">show</a>
</div>
</body>
</html>
clicking on link doesn't trigger .show() at all! What am i doing wrong?? Update: i tried $(document).ready({... it doesn't help!
7 answers
solution1
3 ACCPTED 2011-03-01 14:10:04
A few things to keep in mind, load the scripts only after the document has finished loading:
$(function(){
/* Scripts here will run only
after the document has loaded */
});
Also, be sure to prevent the default behavior of links when using them to trigger actions:
$(function(){
$("#sh").click(function(e){
e.preventDefault();
$("#container").show();
});
});
With these changes, the code works as expected: http://jsfiddle.net/apsje/
solution2
1 2011-03-01 14:06:27
add your jquery code between this
$(document).ready(function() {
...
});
solution3
1 2011-03-01 14:06:57
Use this:
Because if you call your script before the real HTML, the elements you're referring to doesn't exist yet.
$(document).ready( function() {
$('#sh').click(function(){
$('#container').show();
})
By using the ready event on $(document), you make sure the DOM is completely loaded and ready to be interacted with.
solution4
1 2011-03-01 14:07:27
The browser has not yet rendered #sh when you are binding the click.
Try the following:
$(document).ready(function() {
$('#sh').click(function(){
$('#container').show();
});
});
It binds the click after the document has loaded.
solution5
0 2011-03-01 14:07:39
Your code is running before the elements are present in the DOM. Your script block should look like:
<script type="text/javascript">
$( function()
{
$( '#sh' ).click( function()
{
$( '#container' ).show();
} );
} );
</script>
solution6
0 2011-03-01 14:07:59
或将脚本放在</body>之前
solution7
0 2011-03-01 14:10:53
$(document).ready(function(){
$('#sh').click(function(){
$('#container').show();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.