0

I'm using datatables to generate content on my page, and I'd like to use one of the IDs generated in the table to be tied to a jQuery on statement, but it's not working, and I'm not sure why.

me_table = $('#me_table').DataTable({    
      ...code...                         
      'columnDefs'      : [
                          {
                            targets   : [11,12,13,14,15,16,17,18,19],                         
                            "render": function ( data, type, row, meta ) {                                
                                if (data == null ) {
                                    this_column = meta.col;                                   
                                      return '<input id="col_'+ this_column +'" class="add_me_entry"></input>';
                                    }
                                } else {
                                  return data;
                                }                               
                            },
                          },                                                 
      }            
    });

I stripped non-meaningful code out of this snippet, so it won't run, but the point is that when the page loads, a plugin called DataTables creates a table that has a cell in it whose html is <input id="col_11">.

Further down in my code, I try to use this in my $(document).ready function, but neither of these lines of code ever triggers.

$(document).ready(function(){

    $('#col_11').on('keyup paste',test_function); //test_function doesn't get called

    $('#col_11,#col_12').on("change keyup paste",function() { 
      console.log("hi"); //no console.log
    });   
});

My thought process was that by the time $(document).ready fires, Datatables has already created the element <input id="col_11">, but maybe this isn't the case? I've tried using on and bind - nothing on either one. I've also tried putting the whole thing into $(document).ready, and just putting these two statements AFTER the creation of the table, but still nothing.

What am I doing wrong here? The DataTables part works fine - I get the input box, I check the console and it has the correct id - I just can't get anything to trigger off it...

My only other thought would be to use some inline code like <input id="col_11" onclick="do_something()"> but I'm not sure there is an "on" event for keyup/paste/change like there is with jQuery.

Brian Powell
  • 3,336
  • 4
  • 34
  • 60
  • The elements you're attaching the events to are not in the DOM when the page is loaded, so you need to use a delegated event handler. See the question I marked as duplicate for more information – Rory McCrossan Jan 05 '17 at 16:16
  • This is great - I wasn't sure what this type of thing was called, so thanks for the link! – Brian Powell Jan 05 '17 at 16:19
  • Not sure if anyone will see this since the question got marked duplicate, but if my ENTIRE page basically consists of this table - what is my "static ancestor" here? Is there an easy way to find out? The only piece of html in my page that exists prior to Datatables doing its thing is the ``
     – Brian Powell Jan 05 '17 at 16:26
  • 1
    Yep the `` element would be my first suggestion. Try `$('#me_table').on('change keyup paste', '#col_11, #col_12', function() { /* code here... */ });`
     – Rory McCrossan Jan 05 '17 at 16:32
  • 1
    @RoryMcCrossan you da man. Binding it to table worked like a charm. – Brian Powell Jan 05 '17 at 16:35

0 Answers0