OnClick событие не работает в JQuery

Question

У меня есть эти 3 дивы:

<div id="home_type">2 Storey</div> 
<div id="home_type">Bungalow/ Bungalow Loft</div> 
<div id="home_type">Townhome</div> 

и я это OnClick событие:

$('#home_type').click(function(){ 
    alert('hi'); 
}); 

, но он работает только для первого элемента, вот мой jfiddle (который также не работает, бросать ошибку Uncaught ReferenceError: $ is not defined)

http://jsfiddle.net/o1arL1q7/1/

Когда я нажимаю на элемент на своем сайте, я не получаю ошибок, и я получаю только предупреждение для первого элемента. Как я могу это исправить?

Answer 1

Это происходит потому, что атрибут должен быть уникальным. Попробуйте это (заменяющий идентификатор для класса):

HTML

<div class="home_type">2 Storey</div> 
<div class="home_type">Bungalow/ Bungalow Loft</div> 
<div class="home_type">Townhome</div> 

JS

$('.home_type').click(function(){ 
    alert('hi'); 
}); 

* Ошибка брошенной jsFidle потому, что отсутствует ссылка JQuery. Вы можете включить его в структуру & Расширения меню.

Answer 2

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

<div class="home_type">2 Storey</div> 
<div class="home_type">Bungalow/ Bungalow Loft</div> 
<div class="home_type">Townhome</div> 

И JS:

$('.home_type').click(function(){ 
    alert($(this).text()); 
}); 

Answer 3

Вы не можете иметь несколько элементов в DOM с тем же идентификатором. Вы должны были бы сделать эти классы или изменить их удостоверения личности

HTML

<div class="home_type">2 Storey</div> 
<div class="home_type">Bungalow/ Bungalow Loft</div> 
<div class="home_type">Townhome</div> 

JS

$('.home_type').click(function(){ 
    alert('hi'); 
}); 

http://jsfiddle.net/o1arL1q7/4/