CODEWITHSUNDEEP
javascriptjquerycsshtml
ony seven
ony seven

Reputation: 149

cannot select text, cannot click <input>

I create a div on a function

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');
  }
});

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

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

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.

Anyone can guide me to know where is the problem?

Upvotes: 1

Views: 1620

Answers (1)

Chiller
Chiller

Reputation: 9738

You need to append the created div into the body

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());

Upvotes: 2

Related Questions