チェックボックスのスライダがマウスで動作しないのはなぜですか？

Question

私は次のdataTable要素を持っている：

<div id="searchable_wrapper" class="dataTables_wrapper form-inline" role="grid"> 
    <table id="termGridParametersTable" class="table table-bordered table-hover table-striped dataTable" aria-describedby="searchable_info"> 
     <thead> 
      <tr> 
       <th th:text="#{gen.code}" /> 
       <th th:text="#{gen.desc}" /> 
       <th th:text="#{termGrid.paramType}" /> 
       <th th:text="#{termGrid.paramValue}" /> 
      </tr> 
     </thead> 

     <tbody> 
      <tr th:each="gridEffectiveParam : ${effectivePojo.effectiveParameters}"> 
       <td th:text="${gridEffectiveParam.parameter.code}" /> 
       <td th:text="${gridEffectiveParam.parameter.description}" /> 
       <td th:text="#{'termGrid.' + ${gridEffectiveParam.parameter.contractParameterType}}" /> 
       <td> 

        <th:block th:if="${#strings.equals(gridEffectiveParam.parameterType,'paramType.boolean')}"> 
         <input type="checkbox" name="booleanValue" th:onchange="'updateValue(\'' + ${gridEffectiveParam.id} + '\', this);'" th:checked="${gridEffectiveParam.booleanValue}" class="checkbox-slider colored-darkorange" /> 
         <span class="text"></span> 
        </th:block> 

        <th:block th:if="${#strings.equals(gridEffectiveParam.parameterType,'paramType.float')}"> 
         <input class="form-control" type="text" id="floatValue" th:onblur="'updateValue(\'' + ${gridEffectiveParam.id} + '\', this);'" th:value="${gridEffectiveParam.value}" /> 
        </th:block> 

        <th:block th:if="${#strings.equals(gridEffectiveParam.parameterType,'paramType.integer')}"> 
         <input class="form-control" type="text" id="intValue" th:onblur="'updateValue(\'' + ${gridEffectiveParam.id} + '\', this);'" th:value="${gridEffectiveParam.value}" /> 
        </th:block> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

うまく働いて、次れるjavascript関数updateValue()：

function updateValue(id,value) { 
    $.ajax({ 
     url: "updateEffectiveParameter?id=" + id + "&value=" + value.value, 
    type: "GET", 
    datatype:"json", 
    contentType: 'application/json', 
    mimeType: 'application/json', 
    success: function(response){ 
     if(!response){ 
      bootbox.alert("a problem occured"); 
     } 
    }, 
    error: function(e){ 
     alert('error message'); 
    } 
}); 

をしかし、私は唯一の前のフィールドからTABを押すことで、チェックボックス、スライダーの値を変更することができますスペースバーを打つ。マウスを選択しない。

これはDataTables JS componentと関係があると私は理解しています。

ここで問題は何ですか？また、問題を解決する方法を教えてください。

Answer 1

最初のチェックボックスはth:onchange、2番目と3番目のチェックボックスはth:onblurです。私はth:onchangeを3つすべて使用する必要があると思います。