无法选择文本，无法单击 <input>

Question

我在一个函数上创建一个 div

function formatdata() {
  var div = document.createElement("div");
  div.className = 'inTable';
  div.innerHTML = "<label>Cannot Select</label><input type='text' value='' style='z-index:1300;!important'>";
  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');
  }
});

我不能选择标签，不能用光标聚焦输入字段，但是使用tab键可以聚焦，我想，这个div的z-index低于父元素，我只是创建脚本来获取z-索引

$(document.body).click(function() {
  var zind = $(this).css('z-index');
  alert(zin);
});

当我点击 div 时，div 的父级说“auto”，在 chrome 中我检查了开发人员工具 -> 元素，但我不知道问题出在哪里。

谁能指导我知道问题出在哪里？

Answer 1

您需要将创建的 div 附加到正文中

function formatdata() {
  var div = document.createElement("div");
  div.className = 'inTable';
  div.innerHTML = "<label>Cannot Select</label><input type='text' value='' style='z-index:1300;!important'>";
  return div;
}


document.body.appendChild(formatdata());