jQuery - 如何将事件绑定到稍后将显示的隐藏元素？答案

【问题标题】：jQuery - How do I bind events to hidden elements that will be shown later?jQuery - 如何将事件绑定到稍后将显示的隐藏元素？
【发布时间】：2011-04-13 21:00:09
【问题描述】：

我正在尝试将“点击”事件附加到特定类的所有元素。问题是某些元素在绑定事件时隐藏（显示：无）的选项卡上。 (.bind())。似乎当显示这些元素时，事件不再被绑定。

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

隐藏的元素似乎没有绑定点击事件。如果我选择隐藏元素：

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

当这些元素不再隐藏时，似乎没有绑定点击事件。有没有人经历过这个？有没有办法绑定和事件到元素而不考虑它们的显示属性？

谢谢

【问题讨论】：

测试您的选择器以确保它选择了隐藏的元素。 display:none 的元素仍然可以绑定事件。尝试 $('a.someClass:hidden').length 并查看返回的内容以测试您的选择器是否正确。
'不管'或'无关'。永远不要“不顾一切”;)

标签： jquery

【解决方案1】：

从 jQuery 1.7 开始，.live() 方法已被弃用。

您现在可以使用.on() 方法。通过将委托事件附加到运行 jQuery 时在 HTML 中可见的元素。

所以如果在运行jQuery时a.someClass被隐藏了，你应该给body附加一个委托事件，这样以后有可见的a.someClass元素时才会运行，例如：

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

【讨论】：

假设您调用了一个模板，该模板在最初隐藏的页面上呈现一个 HTML 块，并且该块具有一些内联 javascript（对于它自己），上面的代码不会被触发，因为它是在那个隐藏的元素中。有没有办法让内联 javascript 也被触发？
$(document).on() 也可以正常工作。迄今为止最好的答案和解释。

【解决方案2】：

2 年后编辑：正如一些人指出的那样，Live 函数现在已被弃用（您也可以在链接文档页面的顶部看到）。当前版本的正确事件处理程序名称为On。请参阅 Maxim 的答案以获取一个很好的示例。

原答案：
您是否尝试过使用Live()？

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

?

_{版本说明：live 在 jQuery 1.7 中已被弃用，并在 jQuery 1.9 中被删除。此答案仅适用于早于 jQuery 1.7 的 jQuery 版本}

【讨论】：

.live 现在不推荐使用 .on 或 .delegate api.jquery.com/live

【解决方案3】：

使用委托（注意这是在您取消隐藏它们之后）：

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

【讨论】：

【解决方案4】：

使用

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

})

parentelement 应该在页面加载时可见

【讨论】：

【解决方案5】：

根据http://api.jquery.com/live/的jquery文档

将处理程序附加到与当前选择器匹配的所有元素的事件，现在和将来

以下是如何使用它的示例：

<!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 */});

【讨论】：

你为什么重复Maxim McNair's answer？
当时Maxim使用.live()而不是.on()。检查更新日志。
明白，谢谢。您可能仍想删除您的答案，因为它与另一个答案重复。
谁做的？马克西姆在你之前提到了on——甚至以更好的方式。还要记住 Stack Overflow 的优先级应该是向他人提供信息，而不是积分。