如何在所有具有相同类的 div 上设置点击事件答案

【问题标题】：How to set click event on all div with same class如何在所有具有相同类的 div 上设置点击事件
【发布时间】：2016-03-19 15:57:36
【问题描述】：

我无法在所有具有“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 帮助布置网格的方式。

【问题讨论】：

你能用你的代码 HTML 和 CSS 做一个 jsfiddle 吗？
这个问题可能不是js问题，而是css/html问题。
是的，没有关于您如何以不同方式设计黑白卡片的线索。我怀疑 CardClick 是“虚拟”div，而黑卡是“卡片”。 HTML/CSS 问题也是如此，其中“卡片”的宽度和高度仅为 0（无可点击目标）。
Here's a working example
click 类在哪里？

标签： javascript jquery css jquery-events event-bubbling

【解决方案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。

【讨论】：

我在文档 load 中有我的 JS 代码，我相信 onload 事件会在 ready 之后触发，所以这应该不是问题。
@baltusaj 好的，正如我所见，您已经更正了问题中的选择器。你还有同样的问题吗？你真的应该尝试在jsfiddle 中重现你的问题 - 我知道这有点工作，但它确实会帮助我们为你提供支持。

【解决方案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") );
    });
});

【讨论】：

【解决方案3】：

在所有具有“card”类的 DIV 上触发相同的事件

但是你将它绑定到 divs 类 click

改成

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

【讨论】：

这是 stackoverflow 上的一个错字。现在在这里修复它。感谢您的发现。代码将其绑定到 .card

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

如果我们将$(".click").click(function() { 更改为$(".card").click(function() { 不会有任何问题，因为您想将click 事件处理程序添加到所有具有card 类的div。见下面运行代码sn -p：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
click on Divs below:

<div class="card margin">1</div> 
<div class="card margin">2</div>  
<div class="card margin">3</div>  
<div class="card margin">4</div>

【讨论】：