javascript - 如何在同一类的所有div上设置点击事件

Question

我在所有具有“card”类的 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>

我将我的处理程序设置为:

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

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

即使顶行标记为 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 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")仅适用于具有该类的div “卡”。