javascript - 无法选择文本，无法单击 <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());