如何在具有相同类的所有div上设置click事件 [英] How to set click event on all div with same class

问题描述

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

I am having trouble with firing up same event on all DIVs which have class "card" as shown in below screenshot:

<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显示。对于所有其他框，行警告（点击...）没有事件执行。

Problem is that the alert box appears only for those DIVs marked as black in screenshot below. For all other boxes, line alert("clicked...") doesn't event execute.

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

Even the box marked as 5 in top row, has the alert box appear only if it is clicked in its top-right corner. Clicking any other place in this box doesn't fire up the alert. (Boxes in bottom row don't have this problem, Alert for them appear fine if clicked inside them anywhere).

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

Is this somehow related to Event Bubbling or Event Catching? How can I fix it such that the alert gets called for all DIVs with class "card"?

更新：
相关的CSS如下所示：

Update: Related CSS look like following:

.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帮助布局网格的方式。

Update - Added HTML code to the question. Earlier I had a screenshot there. "col-md-1" etc. is how twitter bootstrap is helping laying out grid.

推荐答案

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

make sure to put your jquery/javascript code inside the document-ready function $(function() { /* ..code.. */ });. so you know that your divs are loaded into the DOM at the point where you want to apply your click-event:

$(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。

note: the selector $("div.card") only applies to divs with the class "card".

这篇关于如何在具有相同类的所有div上设置click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！