Click event not working when class name is same

Question

Why click event is not working here? What is my mistake?

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

Read [Attach and Detach Event Handlers](http://stackoverflow.com/documentation/jquery/1321/events/7665/attach-and-detach-event-handlers#t=201701121235252486981) in the [SO Documentation](http://stackoverflow.com/documentation/jquery/1321/events/7665/attach-and-detach-event-handlers#t=201701121235252486981) — Washington Guedes, Jan 12 '17 at 12:37

score 2 · Answer 1 · edited Jan 12 '17 at 13:47

Your divs are empty and not closed.

Close them first

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

score 1 · Answer 2 · answered Jan 12 '17 at 12:41

You can mind about .on() jQuery's feature.

The jQuery's official documentation: http://api.jquery.com/on/

Run the example below, hope it helps:

// 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 />

score 1 · Answer 3 · answered Jan 12 '17 at 12:42

Your HTML is incomplete, kindly fix your HTML to be as following:

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

score 0 · Answer 4 · answered Jan 12 '17 at 12:42

Check this bin, seems like all working fine

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

I just close all divs

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

and add some log alert

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

Click event not working when class name is same

4 Answers4