title: cannot select text, cannot click <input>
body: <p>I create a div on a function</p>
  
  <pre><code>function formatdata() {
    var div = document.createElement("div");
    div.className = 'inTable';
    div.innerHTML = "&lt;label&gt;Cannot Select&lt;/label&gt;&lt;input type='text' value='' style='z-index:1300;!important'&gt;";
    return div;
  }
  
  $('#data-table tbody').on('click', 'td.details-control', function() {
    var tr = $(this).closest('tr');
    var row = tabel.row(tr);
    if (row.child.isShown()) {
      row.child.hide();
      tr.removeClass('shown');
    } else {
      var data = tabel.row(this).data();
      row.child(formatdata(row.data())).show();
      tr.addClass('shown');
    }
  });
  </code></pre>
  
  <p>I cannot select the label, cannot focus on input field with cursor, but use tab key it can focus, i think, its about z-index of this div is lower than parent element, I just create script to get z-index</p>
  
  <pre><code>$(document.body).click(function() {
    var zind = $(this).css('z-index');
    alert(zin);
  });
  </code></pre>
  
  <p>When i clicked the div, parent of div its say "auto", in chrome i check developer tools -> element , but i don't know where is the problem.</p>
  
  <p>Anyone can guide me to know where is the problem?</p>