Problem with button click event in jquery

Question

I use jQuery when I click a button to show a div, but don’t know why its not working ...

HTML:

<input type="button" id="addmoresg" value="Add More" name="button"> <div id="addsg" style="display:none"> <!-- more HTML here --> </div> 

JavaScript:

 $(document).ready(function() { $('.addmoresg').click(function() { $('.addsg').show("slow"); }); }); 

jsFiddle demo: http://jsfiddle.net/XGVp3/

I do not get any result when the button is clicked.

Answer 1

2 problems:

• You did not select jQuery as the library in your demo.

• You use class selectors ^[docs] ( .addmoresg ) instead of id selectors ^[docs] ( #addmoresg ). Your elements have id s, not class es:

   <input type="button" id="addmoresg" value="Add More" name="button"> 

  $('.addmoresg) will select elements with class="addmoresg" , for example.

   <input type="button" class="addmoresg" value="Add More" name="button"> 

Working demo

jQuery has excellent documentation and a list of all possible selectors , with examples.

Answer 2

just change your code as:

 $(document).ready(function() { $('#addmoresg').click(function() { $('#addsg').show("slow"); }); }); 

Basically, you are targeting the adddsg class (made by .class ). Since the div has an adddsg identifier, you need to target using #ID

Hope this helps.