jQuery - How do I bind events to hidden elements that will be shown later?

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

test your selector to make sure it is selecting the hidden elements. Elements that are display:none can still have events bound to them. try $('a.someClass:hidden').length and see what that returns to test if your selector is correct. — derek
– derek, Commented Apr 13, 2011 at 21:12

Hanna · Accepted Answer · 2013-04-26 16:30:08Z

67

As of jQuery 1.7, the .live() method is deprecated.

You can now use the .on() method. By attaching a delegated event to an element that is viewable in the HTML when the jQuery is run.

So if a.someClass is hidden when jQuery is run, you should attach a delegated event to the body, so it will run when there is a viewable a.someClass element in the future, for example:

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

edited Apr 26, 2013 at 16:30

Hanna

10.9k11 gold badges60 silver badges91 bronze badges

answered Jun 15, 2012 at 12:14

Maxim McNair

1,0181 gold badge9 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

basZero Over a year ago

Let's say you call a template that renders an HTML block on the page that is initially hidden, and that block features some inline javascript (for itself), the above code does not get triggered, as it is within that hidden element. Is there a solution so that the inline javascript will also get triggered?

Benjamin Over a year ago

$(document).on() works fine too. Best answer and explanation so far.

Damb · Accepted Answer · 2013-06-27 06:32:34Z

13

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}

edited Jun 27, 2013 at 6:32

answered Apr 13, 2011 at 21:03

Damb

14.7k6 gold badges50 silver badges49 bronze badges

1 Comment

JudgeProphet Over a year ago

.live is now deprecated use .on or .delegate api.jquery.com/live

Ady Ngom · Accepted Answer · 2011-04-13 21:08:14Z

7

Use delegate (note this is after you unhide them):

$('body').delegate('.someClass', 'click', function (evt) {
    // do something here
});

answered Apr 13, 2011 at 21:08

Ady Ngom

1,3122 gold badges10 silver badges12 bronze badges

Comments

Darren Shewry · Accepted Answer · 2017-04-26 14:52:45Z

5

Use

$('parentelement').on('click','taget element',function(){

})

parentelement should be visible at page load

edited Apr 26, 2017 at 14:52

Darren Shewry

10.5k4 gold badges54 silver badges47 bronze badges

answered Sep 21, 2016 at 5:01

Vipin

512 silver badges4 bronze badges

Comments

joe_coolish · Accepted Answer · 2011-04-13 21:07:14Z

According to the jquery documentation at http://api.jquery.com/live/

Attach a handler to the event for all elements which match the current selector, now and in the future

Here is an example of how to use it:

<!DOCTYPE html> 
<html> 
<head> 
  <style> 
  p { background:yellow; font-weight:bold; cursor:pointer;  
          padding:5px; } 
  p.over { background: #ccc; } 
  span { color:red; } 
  </style> 
  <script src="http://code.jquery.com/jquery-1.5.js"></script> 
</head> 
<body> 
  <p>Click me!</p> 

  <span></span> 
<script> 
    $("p").live("click", function(){ 
      $(this).after("<p>Another paragraph!</p>"); 
    }); 
</script> 

</body> 
</html>

dylan maxey · Accepted Answer · 2013-06-20 21:47:52Z

0

Times have changed, it would now be done using ".on"

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

answered Jun 20, 2013 at 21:47

dylan maxey

671 silver badge3 bronze badges

4 Comments

John Dvorak Over a year ago

Why are you repeating Maxim McNair's answer?

dylan maxey Over a year ago

At the time Maxim was using .live() instead of .on(). Check the changelogs.

John Dvorak Over a year ago

Understood, thanks. You might still want to delete your answer now that it duplicates another one.

John Dvorak Over a year ago

By whom? Maxim mentioned on before you did - and in a better way, even. Also remember the priority on Stack Overflow should be to provide information to others, not to rack up points.

Collectives™ on Stack Overflow

jQuery - How do I bind events to hidden elements that will be shown later?

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

4 Comments

Linked

Related