Question

我有类似的东西。为什么这不起作用？我只想要具有.inactive类的行是可点击的。当单击一行时，它应该获得.active类。

抱歉编码错误，jQuery初学者。

的JavaScript

$('#shipping_table tr.inactive').on("click",function(){
    $('#shipping_table tr').removeClass("active");
    $('#shipping_table tr').addClass("inactive");

    $(this).removeClass("inactive");
    $(this).addClass("active");

    //Some more stuff

});

HTML

<table id="shipping_table">
   <tr class="active">
      <td>Row 1</td>
   </tr>
   <tr class="inactive">
      <td>Row 2</td>
   </tr>
   <tr class="inactive">
      <td>Row 3</td>
   </tr>
</table>

Answer 1

尝试：

$('#shipping_table').on('click', 'tr.inactive', function(){ });

如果它们在运行时发生，它将动态地将事件绑定到所有tr.inactive元素。

Demonstration

Answer 2

只有在带有.inactive类的tr上发生onclick时才执行此功能。如果您更改选择器它应该工作。

$('#shipping_table tr').on("click",function(){
   $('#shipping_table tr').removeClass("active");
   $('#shipping_table tr').addClass("inactive");
   $(this).removeClass("inactive");
   $(this).addClass("active");

  //Some more stuff

});

Answer 3

在选择器中尝试没有类.inactive，因为每个tr都应该是可点击的，而不仅仅是（初始）类.inactive

$('#shipping_table tr').on("click",function(){

<强> working fiddle

Click上的jquery addClass和removeClass

3 个答案: