jQuery hide element after append using jquery.validate

Question

I am having trouble hiding an element after appending it to a div. I have tried everything and looked all over for an answer. I spent almost the whole day on it.

So I use jquery.validate.js to make a custom error code

email: '<img id="img1" class="RCB" src="images/closeButton.png" /><h3>Incorrect Email</h3><p>Please enter a valid email address</p>'

which is then appended to my far right div #rightBar

errorClass: "rightNotification",
errorElement: "div",

errorPlacement: function(error, element) {
  error.appendTo("#rightBar");
},

and then in a seperate js file I try to fade() it when the close button at the top is clicked

$(document).ready(function() {
  $(".RCB").live("click", function() {
    $('.rightNotification').hide();
  });
});

I have also tried

$(document).ready(function() {
  $(".RCB").click(function() {
    $('.rightNotification').hide();
  });
});

and a number of other solutions. I basically want the right close button (RCB) to close the entire notification. I can't really think of anything I haven't tried but I'm hoping you can think of something.

Cheers, Matt

Any help would be greatly appreciated!

Answer 1

You'll need to use event delegation as it is added dynamically - live() was deprecated in version 1.7 and removed in version 1.9:

$(document).on("click", ".RCB", function() {
   $('.rightNotification').hide();
});

Substitute document for a closer container element if possible (for added efficiency).