javascript - How to set click event on all div with same class - Stack Overflow

admin 管理员组

文章数量: 1086019

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.

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.

• javascript
• jquery
• css
• jquery-events
• event-bubbling

Share Improve this question Follow edited Mar 9, 2020 at 22:37 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 14, 2015 at 8:26 UthmanUthman 9,8471919 gold badges7979 silver badges109109 bronze badges 8

• 4 Can you do a jsfiddle with your code HTML and CSS? – Andy Commented Dec 14, 2015 at 8:31
• 2 This problem may not be a js problem but rather a css/html problem. – kockburn Commented Dec 14, 2015 at 8:32
• Yeah, there are no clues on how you've styled the black and white cards differently. I suspect CardClick is the "dummy" div, and the black card is "card". So would be a HTML/CSS problem, where the "card" is just 0 width & height (no clickable target). – Akurn Commented Dec 14, 2015 at 8:38
• Here's a working example – Andy Commented Dec 14, 2015 at 8:40
• Where's the click class? – Akshay Commented Dec 14, 2015 at 8:45

 |  Show 3 more ments

5 Answers 5

Sorted by: Reset to default 3

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

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

http://jsfiddle/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") );
    });
});

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

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

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

本文标签： javascriptHow to set click event on all div with same classStack Overflow