クラス名が同じ場合にクリックイベントが機能しない

Question

クリックイベントがここで動作しないのはなぜですか？私の間違いは何ですか？

$(document).ready(function() { 
 
    $('.dashboardList').click(function() { 
 
    alert("hello"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="dashboardList unread"> 
 
<div class="dashboardList unread"> 
 
<div class="dashboardList unread"> 
 
<div class="dashboardList unread"> 
 
<div class="dashboardList unread">

Answer 1

あなたdivsは空と閉じられていません。

あなたはjQueryの機能.on()について気にすることができます最初の

$(document).ready(function() { 
 
    $('.dashboardList').click(function() { 
 
    alert("hello"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="dashboardList unread">test</div> 
 
<div class="dashboardList unread">test</div> 
 
<div class="dashboardList unread">test</div> 
 
<div class="dashboardList unread">test</div> 
 
<div class="dashboardList unread">test</div>

Answer 2

それらを閉じます。

jQueryの公式ドキュメント：http://api.jquery.com/on/

実行以下の例では、それが役に立てば幸い：

// Waiting for DOM's load 
 
$(document).ready(function(){ 
 
    // Binding the event and it's callback to the selector 
 
    $('.dashboardList').on('click', function(){ 
 
     // Exposing the clicked div's content 
 
     alert($(this).text()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dashboardList unread">test 1</div><br /> 
 
<div class="dashboardList unread">test 2</div><br /> 
 
<div class="dashboardList unread">test 3</div><br /> 
 
<div class="dashboardList unread">test 4</div><br /> 
 
<div class="dashboardList unread">test 5</div><br />

Answer 3

あなたHTMLは親切に次のようにあなたのHTMLを修正し、不完全です。

$(document).ready(function() { 
 
    $('.dashboardList').click(function() { 
 
    alert("hello"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="dashboardList unread">1</div> 
 
<div class="dashboardList unread">2</div> 
 
<div class="dashboardList unread">3</div> 
 
<div class="dashboardList unread">4</div> 
 
<div class="dashboardList unread">5</div>

Answer 4

チェックこのビンは、すべての作業罰金

http://jsbin.com/kicikojuza/edit?html,css,js,output

私はちょうど近くにすべてのdiv

<div class="dashboardList unread">one</div> 
<div class="dashboardList unread">two</div> 
<div class="dashboardList unread">tree</div> 
<div class="dashboardList unread">for</div> 
<div class="dashboardList unread">five</div> 

と

$(document).ready(function(){ 
    $('.dashboardList').click(function(e){ 
     alert("hello, i'm " + e.target.innerText); 
    }); 
});