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 “卡”。