Javascript 如何在同一类的所有div上设置click事件

我在所有有等级“卡”的div上触发相同事件时遇到问题，如下面的屏幕截图所示：

<div class="row">
  <div class="col-md-1">
    <div class="margin"></div>
    <div class="card">
      <div class="front">CardClick</div>
      <div class="back">1</div>
    </div>
  </div>
  <div class="col-md-1">
    <div class="margin"></div>
    <div class="card">
      <div class="front">CardClick</div>
      <div class="back">2</div>
    </div>
  </div>
  <div class="col-md-1">
    <div class="margin"></div>
    <div class="card">
      <div class="front">CardClick</div>
      <div class="back">4</div>
    </div>
  </div>
  <div class="col-md-1">
    <div class="margin"></div>
    <div class="card">
      <div class="front">CardClick</div>
      <div class="back">5</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-1">
    <div class="margin"></div>
    <div class="card">
      <div class="front">CardClick</div>
      <div class="back">4</div>
    </div>
  </div>
  <div class="col-md-1">
    <div class="margin"></div>
    <div class="card">
      <div class="front">CardClick</div>
      <div class="back">5</div>
    </div>
  </div>
  <div class="col-md-1">
    <div class="margin"></div>
    <div class="card">
      <div class="front">CardClick</div>
      <div class="back">6</div>
    </div>
  </div>
  <div class="col-md-1">
    <div class="margin"></div>
    <div class="card">
      <div class="front">CardClick</div>
      <div class="back">4</div>
    </div>
  </div>
</div>

问题是，警报框仅出现在下面的屏幕截图中标记为黑色的div中。对于所有其他框，行

警报（“单击…”）

不会执行事件

即使是最上面一行中标记为5的框，也只有在右上角单击时才会显示警报框。单击此框中的任何其他位置都不会触发警报。（最下面一行中的框没有这个问题，如果在框内的任何位置单击，它们的警报将显示良好）

这是否与事件冒泡或事件捕获有关？我如何修复它，以便对所有具有“card”类的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引导如何帮助布局网格的

在所有有等级“卡”的div上触发相同事件

但是您正在使用class

单击将其绑定到
div
s

换成

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

确保将jquery/javascript代码放入文档就绪函数
$（function（）{/*…code..*/}）中。因此，您知道您的div被加载到
DOM
中，此时您要应用click事件：

$(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。
您可以这样设置处理程序。因此，您将告知您正在单击的卡元素。希望它能帮助你

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

如果我们更改
$（“.click”）。请单击（function（）{
和
$（“.card”）。单击（function（）{
，因为您想将
单击
事件处理程序添加到所有具有类
卡片
的div。请参阅下面运行的代码段：


$（文档）.ready（函数（）{
$（“.card”）。单击（函数（）{
警报（“单击…”）；
});
})；
.margin{
利润率最高：200%；
}
.卡片{
最大宽度：40px；
最小高度：20px；
背景：青色；
边框：1px纯黑；
}

单击下面的div：
1.
2.
3.
4
朋友，你可以参考一下，也许这会对你有所帮助。
我已经展示了事件绑定的3种方式


你能用你的代码HTML和CSS做一个JSFIDLE吗？这个问题可能不是js的问题，而是CSS/HTML的问题。是的，没有任何线索表明你是如何将黑白卡设计成不同的样式的。我怀疑CardClick是“虚拟”div，而黑卡是“卡片”。HTML/CSS的问题也是如此，其中“卡片”的宽度和高度仅为0（无可点击目标）.click
类在哪里？这是stackoverflow上的一个输入错误。现在修复了它。感谢您的发现。代码将它绑定到。cardI将我的JS代码放在文档
load
中，我相信onload事件在
准备就绪后会触发，所以这不应该是一个问题。@baltusaj ok，您已经在y中更正了选择器正如我所看到的，我们的问题。你仍然有同样的问题吗？你真的应该试着在一个-我知道这是一点工作，但它真的会帮助我们支持你。
$(function(){
    $(".card").on('click', function() {
        alert($(this).text() + "clicked...");
    });
    });

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