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() {&nbsp; &nbsp; $(this).toggleClass("highlight");&nbsp; });

Answer 2

你必须尝试一些这样的。#food_table 必须使用 .click 函数 jquery 调用，并且必须在 html 模板中导入 jquery 资源$("#food_table").click(function(){&nbsp; &nbsp; &nbsp;$(this).toggleClass('highlight');&nbsp; &nbsp;});这对我有用。

Answer 3

尝试从身体上做$('body').on('click', '#food_table tbody tr', function(){&nbsp; &nbsp; $(this).toggleClass('highlight');});