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>

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委托它

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

Answer 2

尝试从身体做起

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

Answer 3

您必须尝试这样的操作。 #food_table必须使用.click函数jquery调用，并且您必须在HTML模板中导入jquery资源

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

对我来说很好。

jQuery选择点击表行不起作用

3 个答案: