javascript - 为什么复选框 slider 不适用于鼠标？

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>

updateValue() javascript 函数运行良好，如下所示:

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 并点击空格键来更改复选框 slider 值。没有鼠标选择。

我知道这与 DataTables JS component 有关。 .

这里有什么问题以及如何让它工作？

Answer 1

第一个复选框有 th:onchange ，第二个和第三个复选框有 th:onblur 。我猜你需要在这三个中使用 th:onchange 。