DataTables連續點擊

我有一個基本的SpringBoot應用程序。使用Spring初始化程序，嵌入式Tomcat，Thymeleaf模板引擎和包作爲可執行JAR文件我有一個Datatable像這樣定義，但是然後我單擊一行沒有任何反應我使用的DataTables版本是1.10.15DataTables連續點擊

$(document).ready(function() { 
    $('#deviceEventTable').dataTable({ 
     "order": [[ 0, "desc" ]], 
     "bLengthChange": false, 
     "pageLength": 20, 
    }); 

    $('#deviceEventTable tbody').on('click', 'input', function() { 
     alert ('clicking....'); 
     $(this).closest("tr").toggleClass('selected'); 
    }); 

});

，這裏的表中生成

<!-- TABLE --> 
           <table id="deviceEventTable" class="pure-table" style="position: relative;"> 
           <thead> 
            <tr> 
             <th class="col_id">ID</th> 
             <th class="col_id"><!-- ID --> 
              DEVICE ID 
             </th> 
             <th class="col_id"><!-- ID --> 
              EMPRESA 
             </th> 
             <th class="col_name"><!-- NAME --> 
              DESCRIPTION 
             </th> 
             <th class="col_battery"><!-- BATTERY --> 
              BATERIA 
             </th> 
             <th class="col_last_event"><!-- LAST EVENT --> 
              ULTIMO MENSAJE RECIBIDO 
             </th> 
             <th class="col_signal"><!-- SIGNAL --> 
              SIGNAL 
             </th> 
             <th class="col_signal"><!-- SIGNAL --> 
              DATA 
             </th> 
             <th class="col_state"><!-- STATE --> 
              ALARMA 
             </th> 
            </tr> 
           </thead> 
           <tbody> 

            <tr> 

             <td class="col_id">1</td><!-- ID --> 
             <td class="col_id">Devuser2</td> 
             <td class="col_id">user2 FirstName user2 LastName company</td> 
             <td class="col_name">Test device</td> 
             <td class="col_battery"><!-- BATTERY --> 
              <div class="progressBar" id="max99"><div></div></div><!-- bar % (Change ID maxnumber)--> 
             </td> 
             <!-- <td class="col_temp">0ºC/0ºF </td> --><!-- TEMP. --> 
             <td class="col_last_event">2017-06-20T16:23:26.236</td><!-- LAST EVENT --> 
             <td class="col_signal">-127.0 dBm.</td><!-- SIGNAL --> 
             <td class="col_last_event">1</td><!-- LAST EVENT --> 
             <td class="col_state">                      


             </td><!-- STATE --> 
            </tr> 

            <tr> 

             <td class="col_id">2</td><!-- ID --> 
             <td class="col_id">Devuser2</td> 
             <td class="col_id">user2 FirstName user2 LastName company</td> 
             <td class="col_name">Test device</td> 
             <td class="col_battery"><!-- BATTERY --> 
              <div class="progressBar" id="max99"><div></div></div><!-- bar % (Change ID maxnumber)--> 
             </td> 
             <!-- <td class="col_temp">0ºC/0ºF </td> --><!-- TEMP. --> 
             <td class="col_last_event">2017-06-20T16:23:28.370</td><!-- LAST EVENT --> 
             <td class="col_signal">-127.0 dBm.</td><!-- SIGNAL --> 
             <td class="col_last_event">2</td><!-- LAST EVENT --> 
             <td class="col_state">                      
             </td><!-- STATE --> 
            </tr> 

            <tr> 

             <td class="col_id">3</td><!-- ID --> 
             <td class="col_id">Devuser2</td> 
             <td class="col_id">user2 FirstName user2 LastName company</td> 
             <td class="col_name">Test device</td> 
             <td class="col_battery"><!-- BATTERY --> 
              <div class="progressBar" id="max99"><div></div></div><!-- bar % (Change ID maxnumber)--> 
             </td> 
             <!-- <td class="col_temp">0ºC/0ºF </td> --><!-- TEMP. --> 
             <td class="col_last_event">2017-06-20T16:23:30.737</td><!-- LAST EVENT --> 
             <td class="col_signal">-127.0 dBm.</td><!-- SIGNAL --> 
             <td class="col_last_event">3</td><!-- LAST EVENT --> 
             <td class="col_state">                      

             </td><!-- STATE --> 
            </tr> 

            <tr> 

             <td class="col_id">4</td><!-- ID --> 
             <td class="col_id">Devuser2</td> 
             <td class="col_id">user2 FirstName user2 LastName company</td> 
             <td class="col_name">Test device</td> 
             <td class="col_battery"><!-- BATTERY --> 
              <div class="progressBar" id="max99"><div></div></div><!-- bar % (Change ID maxnumber)--> 
             </td> 
             <!-- <td class="col_temp">0ºC/0ºF </td> --><!-- TEMP. --> 
             <td class="col_last_event">2017-06-20T16:23:32.625</td><!-- LAST EVENT --> 
             <td class="col_signal">-127.0 dBm.</td><!-- SIGNAL --> 
             <td class="col_last_event">4</td><!-- LAST EVENT --> 
             <td class="col_state">                      

             </td><!-- STATE --> 
            </tr> 

            <tr> 

             <td class="col_id">5</td><!-- ID --> 
             <td class="col_id">Devuser2</td> 
             <td class="col_id">user2 FirstName user2 LastName company</td> 
             <td class="col_name">Test device</td> 
             <td class="col_battery"><!-- BATTERY --> 
              <div class="progressBar" id="max99"><div></div></div><!-- bar % (Change ID maxnumber)--> 
             </td> 
             <!-- <td class="col_temp">0ºC/0ºF </td> --><!-- TEMP. --> 
             <td class="col_last_event">2017-06-20T16:23:34.649</td><!-- LAST EVENT --> 
             <td class="col_signal">-127.0 dBm.</td><!-- SIGNAL --> 
             <td class="col_last_event">5</td><!-- LAST EVENT --> 
             <td class="col_state">                      


             </td><!-- STATE --> 
            </tr> 
           </tbody> 
          </table>

來源

2017-06-20 La Carbonell

能否請您出示您的表的內容？ –

你沒有'input'元素。把''input''改成''td''。 –

@ J.Titus，請轉換爲答案 –

你不針對行;您將目標中的任何輸入元素作爲目標。

$('#deviceEventTable tbody').on('click', 'input', function() { // 'input' selects inputs, not the row

使用createdRow在你的配置對象：

'createdRow' : function (row, data, index) { 
        $('td', row).click(function() { 
         // do something 
         }); 
        } 
       },

來源

2017-06-20 14:29:56

DataTables連續點擊

回答

相關問題