Событие с кликом не работает, если имя класса совпадает с именем

Question

Почему click event здесь не работает? Какая у меня ошибка?

$(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 пусты и не закрыто.

Закройте их первый

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

Вы можете возражаете о .on() функции JQuery в.

официальная документация В 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 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); 
    }); 
});