jquery addClass - 在我的函數之外添加並刪除類

Question

對不起我的即將推出的英語。

我會有一個非常特殊的問題。我有一個網格，每個radioButton病變變成一個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'); 
}); 

重要提示：也許你有，直到你看到網格放大小提琴。 （它的一個負責任的電網，與手機版作品）

Answer 1

繼承人的完整的答案。感謝你們所有人的支持和幫助。

非常感謝argonius，他向我指出正確的解決方案

小提琴：Fiddle

HTML表（只有一行）

<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> 

表CSS格式化

.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}*/ 
    } 
} 

和小CSS線，做了我搜查了這麼久的技巧。

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

Answer 2

請檢查該解決方案： http://jsfiddle.net/8uk6n/

$('td').click(function() { 
     if ($(this)[0].localName == "td") { 
      var id = $(this).find('input').attr('id'); 
     } else { 
      var id = $(this).attr('id'); 
     } 
     var row = $(this).closest('tr'); 
     row.find('input:checked').each(function() { 
      $(this).prop('checked', false).checkboxradio('refresh'); 

     }); 
     $("#" + id).prop('checked', true).checkboxradio('refresh');   
     $("#" + id).parent().parent().parent().find('.selected').removeClass('selected'); 
     $("#" + id).parent().addClass('selected'); 
    }); 

，改變你對所選類CSS來

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