Question

I am trying to attach ‘click’ events to all elements of a particular class. The problem is some of the elements are on a tab that is hidden (display: none) at the time that the event is bound. (.bind()). It seems that when these elements are shown the events are no longer bound.

$('a.someClass').bind('click', function(){
  alert("test");
});

The hidden elements do not appear to have a click event bound. If I select the hidden elements:

$('a.someClass:hidden').bind('click', function(){
  alert("test");
});

It seems the click event is not bound when these elements are no longer hidden. Has anyone experienced this? Is there a way to bind and event to elements irregardless of their display property?

Thanks

Answer 1

edit 2 years later: As some people pointed out, the Live function is now deprecated (as you can also see at the top of the linked docs page). The right event handler name for the current version would be On. See Maxim’s answer for a good example.

Original answer:
Have you tried using Live()?

.live('click',function(){/* code */});

?

_{version note: live has been deprecated in jQuery 1.7 and it was removed in jQuery 1.9. This answer is only correct for jQuery versions older than jQuery 1.7}