Question

我正在尝试将“click”事件附加到特定类的所有元素。问题是某些元素位于绑定事件时隐藏的选项卡（display：none）上。（.bind（））。似乎当显示这些元素时，事件不再受限制。

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

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

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

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

由于

Answer 1

从jQuery 1.7开始，不推荐使用.live()方法。

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

因此，如果在运行jQuery时隐藏了a.someClass，则应该将委托事件附加到正文，因此它将在将来有可查看的a.someClass元素时运行，例如：< / p>

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

Answer 2

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

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

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

_{版本说明：jQuery 1.7中已弃用live，并在jQuery 1.9中将其删除。这个答案仅适用于比jQuery 1.7}

更早的jQuery版本

Answer 3

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

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

Answer 4

使用

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

})

页面加载时

parentelement应该可见

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

Answer 6

时代已经改变，现在可以使用“.on”

完成

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

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

6 个答案: