Twitter Bootstrap Question posted in

Twitter bootstrap – 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”?

enter image description here

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.

Tags:

5

Answers


  1. 0

    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...");
});
    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
  3. 0

    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...");
    });
    });
    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
  5. 0

    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") );
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search