Why doesn't jQuery hide () and show () work?

Question

I have a simple DIV and I cannot hide it () and show ().

I think I am doing it right, but I can’t find what is wrong with him.

<div id="thediv" >hola</div> <input type="button" value="click to show">This is the div content</input> $(document).ready(function() { $("div#thediv").hide(); alert($("div#thediv").hide().attr("id")); }); $("button").click( function() { $("div#thediv").show(); alert('click'); }); 

In addition, I created a fiddle in the link " http://jsfiddle.net/rt9Fc/ ".

Any ideas?

Answer 1

put the click handler inside document.ready and change the selector to $("input:button") -

 $(document).ready(function () { $("div#thediv").hide(); alert($("div#thediv").hide().attr("id")); $("input:button").click(function () { $("div#thediv").show(); alert('click'); }); }); 

Demo ---> JsFiddle

Answer 2

There is a more correct version of your code: JsFiddle

HTML:

 <div id="thediv">hola</div> <input type="button" value="click to show"/> 

JavaScript:

 $(function() { var $myDiv = $("#thediv"); $myDiv.hide(); alert($myDiv.attr("id")); $("input[type=button]").on('click', function() { $myDiv.show(); alert('click'); }); }); 

Some useful notes:

• Search the cache of DOM beacuse elements that they find
• use instead of click, it works faster
• $ (function () is an alias for document.ready, it writes faster and has fewer bytes to send over the network :)
• you do not need to use div # id selectors, #id is enough for the beacuse identifier to be unique on your page, moreover, after jquery uses the javascript findElementById function, it will not need to do additional checking for the div.
• there is a good jQuery performance article: artzstudio
• the input should not be split into the open and close tag.

Perhaps you wanted to have this:

HTML:

 <div id="thediv"> hola <input type="button" value="click to show"/> </div> 

this way we can optimize JavaScript:

 $(function() { var $myDiv = $("#thediv"); $myDiv.hide(); alert($myDiv.attr("id")); $myDiv.find("input[type=button]").on('click', function() { $myDiv.show(); alert('click'); }); }); 

Answer 3

Change the button selector to :button or use the input. The button selector is used for <button>Somebutton</button>

 $(document).ready(function() { var $thediv = $('#thediv').hide(); //Cache the object here. Also you can shain it through $(":button").click( function() { $thediv.show(); alert('click'); }); }); 

Fiddle

If you have an id, do not prefix it with a tag. this will make the selector slower. So use #thediv instead of div#thediv . Also try caching the jquery object of the variable, if you use it in several places, this will avoid invoking the creation of the jquery object each time.

Answer 4

Change selector button: since you used a simple <input type='button'/> if you want to use $('button') , change your markup to <button></button>

 $("#thediv").hide(); alert($("div#thediv").hide().attr("id")); $("input[type='button']").click( function() { $("#thediv").show(); }); 

DEMO --> JsFiddle

Answer 5

Give an identifier to a button

 <div id="thediv">hola</div> <input type="button" id="btn" value="click to show"/> 

Use this code

 $(document).ready(function() { $("div#thediv").hide(); alert($("div#thediv").attr("id")); }); $("input#btn").click( function() { $("div#thediv").show(); alert('click'); });