1

I have posted a test case in http://live.datatables.net/fizajopa/1

Steps:

  1. Filter any column which causing the table data count to changed.

  2. Click on the row. -> popup not shown. [WRONG]

  3. Click on the row again. -> popup shown.

After using the column filter, I need to un-focus the column filter, then I can trigger the row click event.

Question: Is this a bug? How to fix?

Teddy Suyanto
  • 75
  • 2
  • 8

5 Answers5

3

It is not a bug, it is the expected behaviour. You are using a paginated table, and then 

$('#example td').click( function () {
   alert('x');
});

is executed, you actually only attach the click handler to visible <td>'s, i.e <td>'s on page #1. You must use a delegated event handler in order to target all <td>'s at any time, also those injected to the DOM dynamically : 

$('#example').on('click', 'td', function () {
  alert('x');
});

your demo edited -> http://live.datatables.net/fizajopa/3/edit

Update, I see the problem. Simply call blur() in the filter input handler :

$("#example thead th input[type=text]").on( 'keyup change', function () {
  table
    .column( $(this).parent().index()+':visible' )
    .search( this.value )
    .draw();
  $(this).blur() //<----
});

But that will remove focus from the <input> each time anything is typed or changed, also if the user wants to type more. To avoid that you can use an approach like this jQuery .keyup() delay :

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

// Apply the filter
$("#example thead th input[type=text]").on( 'keyup change', function () {
  var that = this;
  delay(function(){
    table
      .column( $(that).parent().index()+':visible' )
      .search( that.value )
      .draw();
    $(that).blur()
  }, 500);
});

$('body').on('click', 'td', function () {
  alert('x');
});

forked demo -> http://live.datatables.net/xoyutune/1/edit

Dont know if 500ms is suitable, you can experiment with that.

Community
  • 1
  • 1
davidkonrad
  • 83,997
  • 17
  • 205
  • 265
  • 1
    I wonder if I should wait some time giving you the chance to answer first, your post is 3 seconds earlier than mine. ;) – Gyrocode.com Jun 12 '15 at 13:52
  • @Gyrocode.com, Heh, it has happend a few times lately - almost similar answers between seconds :) You have been first too. I have answered a lot in these tags (jquery-datatables, datatables) because almost no one answered questions here before, and the sporadic answers were seldom good quality, but I promise to step back a little bit in the future, you deserve the reps, and I dont need them. – davidkonrad Jun 12 '15 at 17:25
  • thanks, but please don't step back, your answers always very thorough and good quality. I'm not trying to race you in any way. – Gyrocode.com Jun 12 '15 at 17:46
  • @Gyrocode.com thank you for your answer :). From my understanding of your answer, using your demo should have the fixed behavior. I tried but still experiencing the same. I still have to click twice (1st will remove focus on the filter textbox, 2nd will show the alert) on the row after I filter the column. Or am I misunderstood here? – Teddy Suyanto Jun 15 '15 at 02:53
  • @TeddySuyanto, you're replying to answer of David Konrad, not mine, although solution is the same. When running the demo, I always get an alert in both of our demos: before filtering/sorting, when focus is on filter textbox, or after filtering/sorting. What browser are you using? – Gyrocode.com Jun 15 '15 at 12:04
  • @Gyrocode.com Ops, sorry about that. I am using Chrome Version 43.0.2357.124. – Teddy Suyanto Jun 16 '15 at 07:39
  • @davidkonrad this approach will prevent the problem, but don't think this is preferred. Back to the root, so this is really the expected behavior? – Teddy Suyanto Jun 16 '15 at 07:42
  • @davidkonrad Isn't it possible to make it so that when the mouse moves over the clickable area, focus is regained? (rather than a timeout)? – BSUK Feb 28 '16 at 22:47
  • Hey @BSUK, you should ask a new question for this. – davidkonrad Feb 28 '16 at 22:56
  • Thanks @davidkonrad I managed to resolve this myself, though I'm not quite sure how?!! Solution here: https://datatables.net/forums/discussion/33544/having-to-click-twice-after-using-individual-column-filtering#latest – BSUK Mar 02 '16 at 12:38
2

You need to use delegated event handler because cells get recreated when table is redrawn, for example after filtering or page change.

Below is the code that you need to update to handle clicks correctly:

$('#example tbody').on('click', 'td', function(){
   alert('x');
});

See the example below for code and demonstration. 

$(document).ready( function () {
  var table = $('#example').DataTable();
  
  // Apply the filter
  $("#example thead th input[type=text]").on( 'keyup change', function () {
    table
   .column( $(this).parent().index()+':visible' )
   .search( this.value )
   .draw();
  } );
  
  $('#example tbody').on('click', 'td', function (){
     alert('x');
  });
} );
<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8 />
<title>jQuery DataTables</title>  
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
</head>
  
<body>
<table id="example" class="display" width="100%">
<thead>
<tr>
  <th>Name</th>
  <th>Position</th>
  <th>Office</th>
  <th>Age</th>
  <th>Start date</th>
  <th>Salary</th>
</tr>
</thead>

<tfoot>
<tr>
  <th>Name</th>
  <th>Position</th>
  <th>Office</th>
  <th>Age</th>
  <th>Start date</th>
  <th>Salary</th>
</tr>
</tfoot>

<tbody>
<tr>
  <td>Tiger Nixon</td>
  <td>System Architect</td>
  <td>Edinburgh</td>
  <td>61</td>
  <td>2011/04/25</td>
  <td>$3,120</td>
</tr>
<tr>
  <td>Garrett Winters</td>
  <td>Director</td>
  <td>Edinburgh</td>
  <td>63</td>
  <td>2011/07/25</td>
  <td>$5,300</td>
</tr>
<tr>
  <td>Ashton Cox</td>
  <td>Technical Author</td>
  <td>San Francisco</td>
  <td>66</td>
  <td>2009/01/12</td>
  <td>$4,800</td>
</tr>
<tr>
  <td>Cedric Kelly</td>
  <td>Javascript Developer</td>
  <td>Edinburgh</td>
  <td>22</td>
  <td>2012/03/29</td>
  <td>$3,600</td>
</tr>
<tr>
  <td>Jenna Elliott</td>
  <td>Financial Controller</td>
  <td>Edinburgh</td>
  <td>33</td>
  <td>2008/11/28</td>
  <td>$5,300</td>
</tr>
<tr>
  <td>Brielle Williamson</td>
  <td>Integration Specialist</td>
  <td>New York</td>
  <td>61</td>
  <td>2012/12/02</td>
  <td>$4,525</td>
</tr>
<tr>
  <td>Herrod Chandler</td>
  <td>Sales Assistant</td>
  <td>San Francisco</td>
  <td>59</td>
  <td>2012/08/06</td>
  <td>$4,080</td>
</tr>
<tr>
  <td>Rhona Davidson</td>
  <td>Integration Specialist</td>
  <td>Edinburgh</td>
  <td>55</td>
  <td>2010/10/14</td>
  <td>$6,730</td>
</tr>
<tr>
  <td>Colleen Hurst</td>
  <td>Javascript Developer</td>
  <td>San Francisco</td>
  <td>39</td>
  <td>2009/09/15</td>
  <td>$5,000</td>
</tr>
<tr>
  <td>Sonya Frost</td>
  <td>Software Engineer</td>
  <td>Edinburgh</td>
  <td>23</td>
  <td>2008/12/13</td>
  <td>$3,600</td>
</tr>
<tr>
  <td>Jena Gaines</td>
  <td>System Architect</td>
  <td>London</td>
  <td>30</td>
  <td>2008/12/19</td>
  <td>$5,000</td>
</tr>
<tr>
  <td>Quinn Flynn</td>
  <td>Financial Controller</td>
  <td>Edinburgh</td>
  <td>22</td>
  <td>2013/03/03</td>
  <td>$4,200</td>
</tr>
<tr>
  <td>Charde Marshall</td>
  <td>Regional Director</td>
  <td>San Francisco</td>
  <td>36</td>
  <td>2008/10/16</td>
  <td>$5,300</td>
</tr>
<tr>
  <td>Haley Kennedy</td>
  <td>Senior Marketing Designer</td>
  <td>London</td>
  <td>43</td>
  <td>2012/12/18</td>
  <td>$4,800</td>
</tr>
<tr>
  <td>Tatyana Fitzpatrick</td>
  <td>Regional Director</td>
  <td>London</td>
  <td>19</td>
  <td>2010/03/17</td>
  <td>$2,875</td>
</tr>
<tr>
  <td>Michael Silva</td>
  <td>Senior Marketing Designer</td>
  <td>London</td>
  <td>66</td>
  <td>2012/11/27</td>
  <td>$3,750</td>
</tr>
<tr>
  <td>Paul Byrd</td>
  <td>Javascript Developer</td>
  <td>New York</td>
  <td>64</td>
  <td>2010/06/09</td>
  <td>$5,000</td>
</tr>
<tr>
  <td>Gloria Little</td>
  <td>Systems Administrator</td>
  <td>New York</td>
  <td>59</td>
  <td>2009/04/10</td>
  <td>$3,120</td>
</tr>
<tr>
  <td>Bradley Greer</td>
  <td>Software Engineer</td>
  <td>London</td>
  <td>41</td>
  <td>2012/10/13</td>
  <td>$3,120</td>
</tr>
<tr>
  <td>Dai Rios</td>
  <td>System Architect</td>
  <td>Edinburgh</td>
  <td>35</td>
  <td>2012/09/26</td>
  <td>$4,200</td>
</tr>
<tr>
  <td>Jenette Caldwell</td>
  <td>Financial Controller</td>
  <td>New York</td>
  <td>30</td>
  <td>2011/09/03</td>
  <td>$4,965</td>
</tr>
<tr>
  <td>Yuri Berry</td>
  <td>System Architect</td>
  <td>New York</td>
  <td>40</td>
  <td>2009/06/25</td>
  <td>$3,600</td>
</tr>
<tr>
  <td>Caesar Vance</td>
  <td>Technical Author</td>
  <td>New York</td>
  <td>21</td>
  <td>2011/12/12</td>
  <td>$4,965</td>
</tr>
<tr>
  <td>Doris Wilder</td>
  <td>Sales Assistant</td>
  <td>Edinburgh</td>
  <td>23</td>
  <td>2010/09/20</td>
  <td>$4,965</td>
</tr>
<tr>
  <td>Angelica Ramos</td>
  <td>System Architect</td>
  <td>London</td>
  <td>36</td>
  <td>2009/10/09</td>
  <td>$2,875</td>
</tr>
<tr>
  <td>Gavin Joyce</td>
  <td>Developer</td>
  <td>Edinburgh</td>
  <td>42</td>
  <td>2010/12/22</td>
  <td>$4,525</td>
</tr>
<tr>
  <td>Jennifer Chang</td>
  <td>Regional Director</td>
  <td>London</td>
  <td>28</td>
  <td>2010/11/14</td>
  <td>$4,080</td>
</tr>
<tr>
  <td>Brenden Wagner</td>
  <td>Software Engineer</td>
  <td>San Francisco</td>
  <td>18</td>
  <td>2011/06/07</td>
  <td>$3,750</td>
</tr>
<tr>
  <td>Ebony Grimes</td>
  <td>Software Engineer</td>
  <td>San Francisco</td>
  <td>48</td>
  <td>2010/03/11</td>
  <td>$2,875</td>
</tr>
<tr>
  <td>Russell Chavez</td>
  <td>Director</td>
  <td>Edinburgh</td>
  <td>20</td>
  <td>2011/08/14</td>
  <td>$3,600</td>
</tr>
<tr>
  <td>Michelle House</td>
  <td>Integration Specialist</td>
  <td>Edinburgh</td>
  <td>37</td>
  <td>2011/06/02</td>
  <td>$3,750</td>
</tr>
<tr>
  <td>Suki Burks</td>
  <td>Developer</td>
  <td>London</td>
  <td>53</td>
  <td>2009/10/22</td>
  <td>$2,875</td>
</tr>
<tr>
  <td>Prescott Bartlett</td>
  <td>Technical Author</td>
  <td>London</td>
  <td>27</td>
  <td>2011/05/07</td>
  <td>$6,730</td>
</tr>
<tr>
  <td>Gavin Cortez</td>
  <td>Technical Author</td>
  <td>San Francisco</td>
  <td>22</td>
  <td>2008/10/26</td>
  <td>$6,730</td>
</tr>
<tr>
  <td>Martena Mccray</td>
  <td>Integration Specialist</td>
  <td>Edinburgh</td>
  <td>46</td>
  <td>2011/03/09</td>
  <td>$4,080</td>
</tr>
<tr>
  <td>Unity Butler</td>
  <td>Senior Marketing Designer</td>
  <td>San Francisco</td>
  <td>47</td>
  <td>2009/12/09</td>
  <td>$3,750</td>
</tr>
<tr>
  <td>Howard Hatfield</td>
  <td>Financial Controller</td>
  <td>San Francisco</td>
  <td>51</td>
  <td>2008/12/16</td>
  <td>$4,080</td>
</tr>
<tr>
  <td>Hope Fuentes</td>
  <td>Financial Controller</td>
  <td>San Francisco</td>
  <td>41</td>
  <td>2010/02/12</td>
  <td>$4,200</td>
</tr>
<tr>
  <td>Vivian Harrell</td>
  <td>System Architect</td>
  <td>San Francisco</td>
  <td>62</td>
  <td>2009/02/14</td>
  <td>$4,965</td>
</tr>
<tr>
  <td>Timothy Mooney</td>
  <td>Financial Controller</td>
  <td>London</td>
  <td>37</td>
  <td>2008/12/11</td>
  <td>$4,200</td>
</tr>
<tr>
  <td>Jackson Bradshaw</td>
  <td>Director</td>
  <td>New York</td>
  <td>65</td>
  <td>2008/09/26</td>
  <td>$5,000</td>
</tr>
<tr>
  <td>Miriam Weiss</td>
  <td>Support Engineer</td>
  <td>Edinburgh</td>
  <td>64</td>
  <td>2011/02/03</td>
  <td>$4,965</td>
</tr>
<tr>
  <td>Bruno Nash</td>
  <td>Software Engineer</td>
  <td>London</td>
  <td>38</td>
  <td>2011/05/03</td>
  <td>$4,200</td>
</tr>
<tr>
  <td>Odessa Jackson</td>
  <td>Support Engineer</td>
  <td>Edinburgh</td>
  <td>37</td>
  <td>2009/08/19</td>
  <td>$3,600</td>
</tr>
<tr>
  <td>Thor Walton</td>
  <td>Developer</td>
  <td>New York</td>
  <td>61</td>
  <td>2013/08/11</td>
  <td>$3,600</td>
</tr>
<tr>
  <td>Finn Camacho</td>
  <td>Support Engineer</td>
  <td>San Francisco</td>
  <td>47</td>
  <td>2009/07/07</td>
  <td>$4,800</td>
</tr>
<tr>
  <td>Elton Baldwin</td>
  <td>Data Coordinator</td>
  <td>Edinburgh</td>
  <td>64</td>
  <td>2012/04/09</td>
  <td>$6,730</td>
</tr>
<tr>
  <td>Zenaida Frank</td>
  <td>Software Engineer</td>
  <td>New York</td>
  <td>63</td>
  <td>2010/01/04</td>
  <td>$4,800</td>
</tr>
<tr>
  <td>Zorita Serrano</td>
  <td>Software Engineer</td>
  <td>San Francisco</td>
  <td>56</td>
  <td>2012/06/01</td>
  <td>$5,300</td>
</tr>
<tr>
  <td>Jennifer Acosta</td>
  <td>Javascript Developer</td>
  <td>Edinburgh</td>
  <td>43</td>
  <td>2013/02/01</td>
  <td>$2,875</td>
</tr>
<tr>
  <td>Cara Stevens</td>
  <td>Sales Assistant</td>
  <td>New York</td>
  <td>46</td>
  <td>2011/12/06</td>
  <td>$4,800</td>
</tr>
<tr>
  <td>Hermione Butler</td>
  <td>Director</td>
  <td>London</td>
  <td>47</td>
  <td>2011/03/21</td>
  <td>$4,080</td>
</tr>
<tr>
  <td>Lael Greer</td>
  <td>Systems Administrator</td>
  <td>London</td>
  <td>21</td>
  <td>2009/02/27</td>
  <td>$3,120</td>
</tr>
<tr>
  <td>Jonas Alexander</td>
  <td>Developer</td>
  <td>San Francisco</td>
  <td>30</td>
  <td>2010/07/14</td>
  <td>$5,300</td>
</tr>
<tr>
  <td>Shad Decker</td>
  <td>Regional Director</td>
  <td>Edinburgh</td>
  <td>51</td>
  <td>2008/11/13</td>
  <td>$5,300</td>
</tr>
<tr>
  <td>Michael Bruce</td>
  <td>Javascript Developer</td>
  <td>Edinburgh</td>
  <td>29</td>
  <td>2011/06/27</td>
  <td>$4,080</td>
</tr>
<tr>
  <td>Donna Snider</td>
  <td>System Architect</td>
  <td>New York</td>
  <td>27</td>
  <td>2011/01/25</td>
  <td>$3,120</td>
</tr>
</tbody>
</table>
</body>
</html>

See jQuery DataTables – Why click event handler does not work for more information.

Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
2

In my case, like davidkonrad suggests I apply blur in the filter input handler, but immediately after I apply focus on it. Thus user can continue to type in the filter and row click works as expected. Try it!

Example:

$("#example thead th input[type=text]").on( 'keyup change', function () {

   //...filtering
   $(this).blur();
   $(this).focus();

});
Davide76
  • 31
  • 1
1

The above solutions did not work for me because I wanted the user to be able to continue to input text regardless of where they put the mouse cursor or how long they waited between key-presses. Instead, I decided to only update the table when they pressed enter and call blur at the end of this function. The best part is this only needed one more line of code. My implementation is below

//set listeners for text filters
$("#productTpjTable thead input").on('keyup change', function (e) {
    if(e.which == 13) {
        table
            .column($(this).parent().index() + ':visible')
            .search(this.value)
            .draw();
    }
});
ledigiacomo
  • 55
  • 1
  • 10
0

I have used the mouse leave function with the blur() which gives an easy solution.

$('.exampledatatables thead tr th').each(function (i) {
    var title = "Search" + $(this).text();
    table.columns().eq(0).each(function (colIdx) {
        $('input', table.column(colIdx).header()).on('keyup change', function () {
            table
                .column(colIdx)
                .search(this.value)
                .draw();
        });
        $('input', table.column(colIdx).header()).mouseleave(function () {
            $(this).blur()
        }); 
    });
});

this works fine for me as of now.please do let me know whether there is any problem in using like these.

Sribin
  • 307
  • 4
  • 16