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 in the SO Documentation — Washington Guedes
– Washington Guedes, Commented Jan 12, 2017 at 12:37

Tha'er AlAjlouni ثائر العجلوني · Accepted Answer · 2017-01-12 13:47:20Z

2

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>

edited Jan 12, 2017 at 13:47

Tha'er AlAjlouni ثائر العجلوني

15.6k7 gold badges37 silver badges40 bronze badges

answered Jan 12, 2017 at 12:38

giker

4,2751 gold badge20 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RPichioli · Accepted Answer · 2017-01-12 12:41:34Z

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

Tha'er AlAjlouni ثائر العجلوني · Accepted Answer · 2017-01-12 12:42:06Z

1

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>

answered Jan 12, 2017 at 12:42

Tha'er AlAjlouni ثائر العجلوني

15.6k7 gold badges37 silver badges40 bronze badges

Comments

Yuriy Yakovenko · Accepted Answer · 2017-01-12 12:42:56Z

0

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

answered Jan 12, 2017 at 12:42

Yuriy Yakovenko

756 bronze badges

Collectives™ on Stack Overflow

Click event not working when class name is same

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related