cannot select text, cannot click

Question

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?

Have you appended the div into the DOM? You have to in order to be able to click or focus it! — Slim, Dec 06 '17 at 12:08
`style='z-index:1300;!important'` --> `z-index` won't apply if the element is *not positioned* (positioned = `fixed`, `absolute`, `relative`, `sticky` - **not** `static`), your `!important` declaration should *precede* the semi-colon terminations (e.g: `z-index:1300 !important;`), if you use an *inline-style* with the `!important` declaration you will not be able to *over-qualify* this rule with external styles *unless* you use an `id` selector (which carries more **weight**) and another `!important` declaration. — UncaughtTypeError, Dec 06 '17 at 12:09
Good point but if he didn't do that how can he try to select or click if there is nothing to see? :D As I understand it the elements are visible in the browser, no? — xander, Dec 06 '17 at 12:09
You know, the only thing we really need to see here is the rendered html and the styles applicable to it (not *all* your markup, just *enough* to pass as a *Minimal, Complete, and Verifiable Example*) - your question, as it is now, doesn't actually *demonstrate or reproduce* the problem. see: https://stackoverflow.com/help/mcve — UncaughtTypeError, Dec 06 '17 at 12:37
@UncaughtTypeError, thanks, i tried it, but i cannot give simple explanation — ony seven, Dec 06 '17 at 12:40
@onyseven that's ok Ony, consider how you can make this happen, this will surely improve the question. Until then, the question is *off topic* since the issue cannot be demonstrated or reproduced - voting to close. — UncaughtTypeError, Dec 06 '17 at 12:55
@UncaughtTypeError, what i ve to do, modified my question or i create a new question? — ony seven, Dec 06 '17 at 15:12
Finnaly, i use this [html input does not get focus when clicked](https://stackoverflow.com/a/14686137/2710052) — ony seven, Dec 06 '17 at 19:22

Chiller · Answer 1 · 2017-12-06T12:17:20.937

2

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

edited Dec 06 '17 at 12:17

answered Dec 06 '17 at 12:08

Chiller

9,520
2
28
38

i've update myquestion, actually this is on a function – ony seven Dec 06 '17 at 12:13
sorry i've update myquestion again, actually i use this script before and no problem with my old website template, and when i use on new website template, and the problem is come – ony seven Dec 06 '17 at 12:29

cannot select text, cannot click

1 Answers1