jquery addClass-在我的函数之外添加和删除类

首先为我即将到来的英语道歉

我会有一个特别的问题。我有一个网格，每个单选按钮都将转换为jquery单选按钮

现在我已经创建了一个JQuery函数，它只允许您在每行中给出一个答案。好久不见了。 特殊之处在于：我向Jquery标签添加了一个类，但是如果您单击Td中的某个位置，该类将自动删除。但是如果你直接点击这个圆圈，它就会工作。为什么?

我已经调试了这个函数，Jquery添加了这个类，但在最后的某个地方删除了它

看看这个提琴：jsfiddle.net/Ehhxa/5/

如所愿，JQuery代码如下：

$('td').click(function () {
    var id = $(this).find('input').attr('id');

    var row = $(this).closest('tr');
    row.find('input:checked').each(function () {
        $(this).prop('checked', false).checkboxradio('refresh');
        // $(this).closest('div').find('.ui-btn-inner').removeClass('selected');
    });
    $("#" + id).prop('checked', true).checkboxradio('refresh');
    $("#" + id).closest('div').find('.ui-btn-inner').addClass('selected');
});

---

重要提示：也许你必须放大小提琴直到你看到网格。（这是一个响应性强的网格，移动版可以正常工作）

请检查此解决方案：

并将选定类的CSS更改为

.selected .ui-btn-inner
    {
        background-color: #ACCAE8 !important
    }

---

这是完整的答案。感谢大家的支持和帮助

多亏了阿戈尼厄斯，他给我指出了正确的解决办法

小提琴：

HTML表格（仅一行）

---

您应该将代码添加到问题中。。。不仅仅是JSFIDLE请在您的问题中发布代码。我已经更新了FIDLE，所以您可以现场查看问题。。。如果这是一个问题，你能比较上面的两个输出，并看到差异吗？你希望看到什么？我只看到标签类和一个我不希望的输出之间的差异。当点击TD时，我从未收到所选的类。根据类，我认为在第一个示例（点击单选按钮）中，您将单元格悬停，在第二个示例中，我对这个答案做了一些更正。请查收。

.selected .ui-btn-inner
    {
        background-color: #ACCAE8 !important
    }

<table id="tbl_sf1" data-role="table" class="tbl_sf1_responsive">
        <thead>
            <tr>
              <th></th>
              <th>SPALTE 1</th>
              <th>SPALTE 2</th>
              <th>SPALTE 3</th>
              <th>SPALTE 4</th>
              <th>SPALTE 5</th>
             </tr>
        </thead>
        <tbody>
            <tr id="tbl_sf1_1">
                <th id="tbl_sf1_1_0">ZEILE 1</th>                              
                <td id="tbl_sf1_1_1"><label><input name="rb_1" value="1" id="rb_1_1" type="radio"/></label></td>                          
                <td id="tbl_sf1_1_2"><label><input name="rb_1" value="2" id="rb_1_2" type="radio"/></label></td>
                <td id="tbl_sf1_1_3"><label><input name="rb_1" value="3" id="rb_1_3"  type="radio"/></label></td>
                <td id="tbl_sf1_1_4"><label><input name="rb_1" value="4" id="rb_1_4"  type="radio"/></label></td>
                <td id="tbl_sf1_1_5"><label><input name="rb_1" value="5" id="rb_1_5"  type="radio"/></label></td>
            </tr>                                                                                                     
        </tbody>
    </table>

.table {
  width: 100%;
  margin-bottom: 20px;
}
td,th
{ 
    border-color: #ACCAE8 !important;
    border: 1px solid #ACCAE8;
    background-color: #FFFFFF;
    text-Align: center;    
    border-width: 1px;
    border-top-style: Solid;
    border-bottom-style: Solid;
}


/* THEAD TEXT FORMATION */
thead tr th 
{
    border-top: none;
    font-weight: normal !important;
    text-align:center !important;
    padding:0px 20px 0px 20px;
}



div.ui-radio label 
{
    border:none ;
}
span.ui-btn-inner 
{
    background-color:#FFF;
}

/* radio Buttons */ 
div.ui-radio label 
{
    margin: 0;
}


textarea 
{
/* TBODY */
     height: 120px !important;
}

@media (min-width: 45em) 
{
    thead td 
    {
        width:120px;
    }
    /* Fixes table rendering when switching between breakpoints in Safari <= 5. See https://github.com/jquery/jquery-mobile/issues/5380 */
    .ui-table-reflow.ui-responsive {
        display: table-row-group;
    }
    /* Show the table header rows */ 
    .tbl_sf1_responsive td,
    .tbl_sf1_responsive th,
    .tbl_sf1_responsive tbody th,
    .tbl_sf1_responsive tbody td,
    .tbl_sf1_responsive thead td,
    .tbl_sf1_responsive thead th 
    {
        border-left:none;
        font-weight:normal;    
        overflow:hidden;
        height: 50px;
        padding: 0px;
        vertical-align: middle;
        display: table-cell;
        margin: 0;
    }
    thead tr th 
    {
        padding:10px !important;
    }
    /* Hide the labels in each cell */ 
    .tbl_sf1_responsive td .ui-table-cell-label,
    .tbl_sf1_responsive th .ui-table-cell-label
    { 
        display: none;
    }

    div.ui-radio,
    div.ui-radio label,
    label span.ui-btn-inner
    {
        height:100%;
        padding:0px! important;
    }
    thead th:last-of-type, 
    thead th:first-of-type
    {
        border-left: none;
    }

    .ui-btn-inner:hover 
    {
            background:#DEEAF5 !important;
    }

    .selected .ui-btn-inner
    {
        background-color: #ACCAE8 !important
    }

    td > div > label > span > span.ui-icon
    {
    /* TBODY */
        left: 50% !important;
        margin-left:-9px;
    }
}


@media (max-width: 45em) 
{
    .tbl_sf1_responsive 
    {
        width:100% !important;
    }
    .tbl_sf1_responsive td,
    .tbl_sf1_responsive th 
    {
        width: 100% !important;
        min-height:40px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        clear: left;
        margin-bottom: 5px;
    }
    tbl_sf1_responsive th 
    {
        border:none !important;
    }
    .tbl_sf1_responsive th 
    {
     font-weight:bold;   
    }

        b.ui-table-cell-label 
    {
        font-weight: normal;
    }

     div.ui-radio 
     {
         float:left;
     }

     span.ui-btn-inner 
     {
         padding-right: 0px !important;
     }

     tbody th 
     {
         border: none !important;
         background: #f9f9f9 /*{c-body-background-color}*/
     }
}

label.ui-radio-on > span
{
    background:#ACCAE8 !important;
}