jQuery - How do I bind events to hidden elements that will be shown later?_问答_开发者

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

开发者 https://www.devze.com 2023-02-25 04:33 出处：网络

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. (.bin

相关专题：jquery

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 a开发者_JS百科re 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

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");
});

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}

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

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

Use

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

})

parentelement should be visible at page load

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>

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

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