Question

我无法在所有有类＆＃34; card＆＃34;的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的框中，只有在其右上角单击时才会显示警告框。单击此框中的任何其他位置不会启动警报。（底行的方框没有这个问题，如果在任何地方点击它们，它们的警报似乎很好。）

这是否与事件冒泡或事件捕获有关？如何解决这个问题，以便为所有DIV调用警报＆＃34; card＆＃34;？

更新的相关的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代码。早些时候我在那里有截图。＆＃34; COL-MD-1＆＃34;等等是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")仅适用于类“card”的div。

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

Answer 3

在所有有类＆＃34; card＆＃34;
的DIV上启动相同的事件

但是你在div上使用类click

绑定它

将其更改为

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

Answer 4

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

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

Answer 5

如果我们将$(".click").click(function() {更改为$(".card").click(function() {，并且您希望将click事件处理程序添加到具有类card的所有div，则不会发现任何问题。请参阅下面的运行代码段：

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

如何在具有相同类的所有div上设置click事件

5 个答案: