Jquery для выбора строки таблицы на клик не работает

Question

Я пытаюсь переключить класс "подсветка" строки HTML таблицы при нажатии с помощью JQuery. Таблица создана с использованием языка шаблонов 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>

JQuery

$("#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').on('click', '#food_table tbody tr', function(){
    $(this).toggleClass('highlight');
});

Answer 2

вы должны попробовать что-то вроде этого. #food_table должен вызываться с помощью функции .click jquery, и вы должны импортировать ресурс jquery в свой HTML-шаблон

$("#food_table").click(function(){
     $(this).toggleClass('highlight');
   });

, это хорошо для меня.

Answer 3

Попробуйте делегировать его из body

$("body").on('click','#food_table tbody tr',function() {
    $(this).toggleClass("highlight");
  });