CODEWITHSUNDEEP
javascriptjquery
Nick Galgay
Nick Galgay

Reputation: 57

jQuery code only fires once

I have jQuery code that fades out a div on click. I have an email tyoe list that each have a delete button, I want to fade out the div on click but it is only fading out the fist div. Here is my code.

$(document).ready(function(){
   $( "#message-close" ).click(function() {
     $( "#messages-wrapper" ).fadeOut( "slow", function() {
     });
   });
});

Say for example I have Ten divs, each wrapped in #messages-wrapper and using the #message-close button. But only the top div fades.

Thanks for any help.

Upvotes: 0

Views: 84

Answers (2)

AlexShanin
AlexShanin

Reputation: 11

You need to use class instead of id ( like this $( ".messages-wrapper" ) ) . Becouse unique id should be only once on the page. If you want to hide all div's, don't use ID. For example :

$(document).ready(function(){ 
 $( "#message-close" ).click(function() {
  $( ".messages-wrapper" ).fadeOut( "slow");
 });
});

Upvotes: 1

user3403959
user3403959

Reputation: 13

You have to use a different ID for each div.

$("#message-close").click(function(){}) is called when you click the element with the message-close ID, and the fadeOut function is aiming the div with the messages-wrapper ID.

So each click function has to aim the respective ID that you want to fadeOut(), and those IDs have to be different.

Upvotes: 0

Related Questions