Как установить кнопку события на все DIV с тем же классом

Question

У меня возникают проблемы с розжига же событие на всех DIVs, которые имеют класс «карты», как показано на скриншоте ниже:

<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 в верхней строке, имеет поле предупреждения, только если оно щелкнуто в правом верхнем углу. При нажатии на любое другое место в этом поле не запускается предупреждение. (Коробки в нижней строке не имеют этой проблемы, оповещение для них кажется прекрасным, если щелкнуть внутри них где угодно).

Это как-то связано с Event Bubbling или Event Catching? Как я могу исправить это так, чтобы предупреждение вызывалось для всех DIV с классом «карта»?

Update: Связанные 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%; 
} 

Update - Добавлен HTML код на вопрос. Раньше у меня был снимок экрана. «col-md-1» и т. д. - то, как twitter bootstrap помогает выложить сетку.

Answer 1

розжиг же событие на всех DIVs, которые имеют класс "карты"

Но вы связывающие его на div с с классом click

изменить его

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

Answer 2

не забудьте поставить свой код jquery/javascript внутри готовой к документу функции $(function() { /* ..code.. */ });. так что вы знаете, что ваши дивы загружаются в 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") относится только к дивы с «картой» класса ,

Answer 3

Вы можете установить обработчик следующим образом. поэтому вы узнаете, какой элемент карты вы нажимаете. надеюсь, это поможет вам.

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

Answer 4

Не вижу никаких проблем, если мы изменим $(".click").click(function() { с $(".card").click(function() {, как вы хотите, чтобы добавить обработчик событий click для всех дивы, имеющих класс card.Ниже работает фрагмент кода:

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

Answer 5

Друг, вы можете сослаться на это, может быть, это поможет вам. Я показал три способа привязки события.

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