title: Apply css on Datatable element on focusout event
body: <p>We have a datatable column being rendered as below:</p>
  
  <pre><code>"render": function (data, type, row, meta){
  
  var dropdownVarCodes = {
     source: varCodes
  };
  
  $(".varcode").autocomplete(dropdownVarCodes);
  if(data == undefined) {
      data = '';
  }
  prop = '';
  if(row.timesheetStatus == "COMPLETE"){
      prop = 'disabled="disabled"';
  }
  return '&lt;input type="text" name="vCode" class="varcode" value="'+data+'" '+prop+' /&gt;';
  </code></pre>
  
  <p>Now we are trying to color the border red on focusout. We did a focusout event binding for the element as below:</p>
  
  <pre><code>jQuery(document).ready(function() {
  ....
  .........
  
  $(document).on('focusout', '.varcode', function(e) {
     alert($('input.varcode').attr('name'));  // we get this correctly as 'vCode'
     var elem = e.target;   // elem = input.varcode, e = r.Event {type: "focusout", ........
     $(elem).css("border","2px solid red");   //elem = input.varcode
  });
  
  .....
  ........
  
  });
  </code></pre>
  
  <p>we get the correct element too as can be seen by debugging (commented statements). Still we don't get the colored border for input element on focus out. Any ideas or pointers?</p>
  
  <p>Note: Same code works if we have a input element created elsewhere on the document.</p>