如何在具有相同类的所有div上设置click事件

我在所有具有类“卡”的DIV上启动相同事件时遇到问题，如下面的屏幕截图所示：

 
 
 
 
CardClick
 
1
 
 
 
 
 
 
CardClick
 
2
 
 
 
 
 
 
CardClick
 
4
 
 
 
 
 
 
CardClick
 
5
 
 
 
 
 
 
 
 
CardClick
 
4
 
 
 
 
 
 
CardClick
 
5
 
 
 
 
 
 
CardClick
 
6
 
 
 
 
 
 
CardClick
 
4
 
 
  

我将处理程序设置为：

 $(".card").click(function() { alert("clicked..."); }); 

问题是警报框仅出现在下面屏幕截图中标记为黑色的DIV上。 对于所有其他框，行alert("clicked...")不会执行事件。

即使是在顶行标记为5的框，也只有在其右上角单击时才会显示警告框。 单击此框中的任何其他位置不会启动警报。 （底行的方框没有这个问题，如果在任何地方点击它们，它们的警报就会显示正常）。

这是否与事件冒泡或事件捕获有关？ 如何修复它，以便为所有带有“卡”类的DIV调用警报？

更新：相关CSS如下所示：

 .card { width: 100px; height: 100px; position: absolute; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; } .card div { display: block; height: 100%; width: 100%; line-height: 100px; color: black; text-align: center; font-weight: bold; font-size: 16px; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .card .front { background: white; border-color: black; border-width: 3px; border-style: solid; color:black; } .card .back { background: black; color:white; -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } .margin { margin-top: 200%; } 

更新 – 为问题添加了HTML代码。 早些时候我在那里有截图。 “col-md-1”等是twitter bootstrap帮助布局网格的方式。

Answer 1

确保将你的jquery / javascript代码放在文档就绪函数$(function() { /* ..code.. */ }); 。 所以你知道你的div在你想要应用你的点击事件的地方被加载到DOM中：

 $(function() { $("div.card").on("click", function(e){ //your code here.. alert("div with class 'card' clicked!"); e.preventDefault(); //to prevent any other unwanted behavior clicking the div might cause }); }); 

注意：选择器$("div.card")仅适用于具有“card”类的div。

Answer 2

朋友，你可以参考这个，可能这会对你有帮助。 我已经展示了3种事件绑定方式。

http://jsfiddle.net/amitv1093/9kgq58fe/

  $(document).ready(function(){ /* option #1*/ $(".card").click(function(){ alert("you clicked " + $(this).attr("class") ); }); /* option #2*/ $(".card").on('click',function(){ alert("you clicked " + $(this).attr("class") ); }); /* option #3*/ $(document).on('click','.card',function(){ alert("you clicked " + $(this).attr("class") ); }); }); 

Answer 3

在所有具有“卡”级别的DIV上发起相同的事件

但是你通过类click将它绑定在div

改为

 $(".card").click(function() { alert("clicked..."); }); 

Answer 4

您可以像这样设置处理程序。 所以你会知道你点击了哪个卡元素。 希望它能帮助你。

 $(function(){ $(".card").on('click', function() { alert($(this).text() + "clicked..."); }); }); 

Answer 5

如果我们改变$(".click").click(function() {看不出任何问题$(".click").click(function() { with $(".card").click(function() {因为你想为所有div添加click事件处理程序类card 。请参阅下面的运行代码段：

 $(document).ready(function(){ $(".card").click(function() { alert("clicked..."); }); }); 

 .margin { margin-top: 200%; } .card{ max-width:40px; min-height:20px; background:cyan; border: 1px solid black; } 

  click on Divs below: 
1
 
2
 
3
 
4