Question

我使用jquery在li上绑定一个on click事件。当dom准备就绪时，我只是编写简单的jquery代码。但我不知道为什么它不起作用。我用chrome或firefox检查，并且没有js的控制台错误。我正在使用jQuery v1.11.1

的JavaScript

$(document).ready(function() {
    console.log('dom ready');
    $('#student_list_ul ul li').click(function(){
        alert('li clicked');
    });
});

HTML

<ul class="list-inline text-center" id="student_list_ul">
    <li>
        <img src="images/student.png" alt="girl_student_image" class="student">
        <div class="studentname">MICHEL HUSSY</div>
    </li>
    <li>
        <img src="images/girl_student.png" alt="student_image" class="student">
        <div class="studentname">LUSY PARKAR</div>
    </li>
    <li>
        <img src="images/student.png" alt="girl_student_image" class="student">
        <div class="studentname">AB DEVILIERS</div>
    </li>
</ul>

Answer 1

从选择器中删除ul。

应为$('#student_list_ul li')

Answer 2

试试这个，

$('#student_list_ul li').click(function(){ // remove the ul from selector hierarchy
     alert('li clicked');
});

或试试，

$('ul#student_list_ul li').click(function(){ // add ul before ul id
     alert('li clicked');
});

$('#student_list_ul li').click(function() { // remove the ul from selector hierarchy
  alert($(this).text()+' clicked!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-inline text-center" id="student_list_ul">

  <li>
    <img src="images/student.png" alt="girl_student_image" class="student">
    <div class="studentname">MICHEL HUSSY</div>
  </li>
  <li>
    <img src="images/girl_student.png" alt="student_image" class="student">
    <div class="studentname">LUSY PARKAR</div>
  </li>
  <li>
    <img src="images/student.png" alt="girl_student_image" class="student">
    <div class="studentname">AB DEVILIERS</div>
  </li>
</ul>

Answer 3

JS代码：

$(document).ready(function() {
    console.log('dom ready');
    $('#student_list_ul li').click(function(){
        alert('li clicked');
    });
});

这会对你有所帮助

Answer 4

Try this code

HTML

 <ul class="list-inline text-center" id="student_list_ul">

            <li>
         <img src="images/student.png" alt="girl_student_image" class="student">
              <div class="studentname">MICHEL HUSSY</div>
            </li>
            <li><img src="images/girl_student.png" alt="student_image" class="student">
              <div class="studentname">LUSY PARKAR</div>
            </li>
            <li><img src="images/student.png" alt="girl_student_image" class="student">
              <div class="studentname">AB DEVILIERS</div>
            </li>

Jquery的

$(document).ready(function() {
    console.log('dom ready');

    $('#student_list_ul li').click(function(){
        alert('li clicked');
    });
});

check this link

简单的jquery代码不起作用

4 个答案:

HTML

Jquery的