How to set click event on all div with same class

问题

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>

I set my handler as:

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

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.

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).

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"?

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%;
}

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.

回答1:

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

});

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

回答2:

Friend,you can refer this, may be this will help you. I have shown 3 ways of event binding.

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:

firing up same event on all DIVs which have class "card"

But you are binding it on divs with class click

change it to

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

回答4:

You can set handler like this. so you will let to know that which card element you are clicking on. hope it will help you.

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

回答5:

Don't see any problem if we change $(".click").click(function() { with $(".card").click(function() { as you want to add click event handler to all divs having class card. See below running code snippet:

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

来源：https://stackoverflow.com/questions/34262480/how-to-set-click-event-on-all-div-with-same-class

标签

javascript

jquery

css

javascript-events

event-bubbling