Jquery在单击时选择表行不起作用

Question

我正在尝试使用 JQuery 在单击时切换 html 表行的类“突出显示”。该表是使用 Django 模板语言创建的。该表可以工作并显示在我的开发服务器中，而 Jquery 可以处理不是用 Django 模板语言创建的表。运行代码时我没有收到任何错误，但是当我单击表格行时它没有做任何事情。我不确定问题可能是什么。HTML<style media="screen"> .highlight {    background-color: yellow;    color: white;    }</style><div class="table-responsive">  <table class="table table table-borderless" id="food_table">    <thead>      <tr>        <th>#</th>        <th>Description</th>        <th>Price</th>      </tr>    </thead>    <tbody>      {% for order in orders %}      <tr>        <td>{{ order.pk }}</td>        <td>{{ order.Price }}</td>        <td>{{ order.Description }}</td>      </tr>      {% endfor %}    </tbody>  </table></div>查询$("#food_table tbody").on('click','tr',function() {    $(this).toggleClass("highlight");  });虚拟数据[    {        "pk": 9,        "Description": "Pizza",        "Price": "88.00"    },    {        "pk": 10,        "Description": "Steak",        "Price": "130.50"    },    {        "pk": 11,        "Description": "Coca Cola",        "Price": "25.95"    },    {        "pk": 12,        "Description": "Water",        "Price": "15.00"    }]

Answer 1

尝试将其从 body

$("body").on('click','#food_table tbody tr',function() {

    $(this).toggleClass("highlight");

  });

Answer 2

你必须尝试一些这样的。#food_table 必须使用 .click 函数 jquery 调用，并且必须在 html 模板中导入 jquery 资源

$("#food_table").click(function(){

     $(this).toggleClass('highlight');

   });

这对我有用。

Answer 3

尝试从身体上做

$('body').on('click', '#food_table tbody tr', function(){

    $(this).toggleClass('highlight');

});