JQuery - Как связать события со скрытыми элементами, которые будут показаны позже?

Я пытаюсь прикрепить события 'click' ко всем элементам определенного класса. Проблема заключается в том, что некоторые элементы находятся на скрытой вкладке (display: none) в момент привязки события. (.bind()). Кажется, что когда эти элементы показаны, события больше не связаны.

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

Скрытые элементы не имеют привязки события клика. Если я выберу скрытые элементы:

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

Кажется, что событие click не связано, когда эти элементы больше не скрыты. Кто-нибудь испытал это? Есть ли способ привязки и события к элементам независимо от их свойства отображения?

Спасибо

Ответ 1

изменить через 2 года. Как указывали некоторые люди, функция Live теперь устарела (как вы можете видеть в верхней части страницы связанных документов). Правильное имя обработчика событий для текущей версии будет On. См. Ответ Максима для хорошего примера.

Оригинальный ответ:
Вы пробовали использовать Live()?

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

_{примечание версии: Live устарел в jQuery 1.7, и он был удален в jQuery 1.9. Этот ответ верен только для версий jQuery старше jQuery 1.7}

Ответ 2

Как и в jQuery 1.7, метод .live() устарел.

Теперь вы можете использовать метод .on(). Присоединение делегированного события к элементу, который можно просмотреть в HTML, когда выполняется jQuery.

Итак, если a.someClass скрывается при запуске jQuery, вы должны присоединить делегированное событие к телу, поэтому оно будет выполняться, когда в будущем будет отображаемый элемент a.someClass, например:

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

Ответ 3

Используйте делегат (обратите внимание, что это после того, как вы их отобразите):

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

Ответ 4

Использование

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

})

parentelement должен быть видимым при загрузке страницы

Ответ 5

В соответствии с документацией jquery на http://api.jquery.com/live/

Прикрепите обработчик к событию для всех элементов, которые соответствуют текущему селектору, теперь и в будущем

Вот пример того, как его использовать:

<!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>

Ответ 6

Времена изменились, теперь это будет сделано с помощью ".on"

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