OnClick事件不是在jQuery的

Question

工作，我有這3周的div：

<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

這是因爲id屬性必須是唯一的。試試這個（一類更換ID）：

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必須是唯一的。問題是你試圖多次使用相同的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中不能有多個元素具有相同的ID。您將需要使這些類或更改其ID的

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/