javascript 创建元素时getElementByID不起作用

wkyowqbh 于 2023-01-16 发布在 Java

关注(0)|答案(1)|浏览(170)

我用javascript创建了一个表格，表格的行和列是基于矩阵的单元格数的，我试着使用一个函数，但是它不能识别创建的ID。

<!DOCTYPE html>
<html lang="en">
  <head >
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body onload="tableCreate()">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

    <script src="src/script.js"></script>
  </body>
</html>

第一部分创建表，第二部分在释放Enter键时增加光标，第三部分是如果表不包含其他行，并且在最后一个单元格中按Enter键，则创建新行

var c = [
  ['casa', 'casa1', 'casa2'],
  ['casa3', 'casa4', 'casa5'],
  ['casa6', 'casa7', 'casa8'],
  ['casa9', 'casa10', 'casa11'],
];
function tableCreate() {
  const body = document.body,
    tbl = document.createElement('table');
  tbl.setAttribute('id', 'tab_1');
  tbl.style.width = '100px';
  tbl.style.border = '1px solid red';

  for (let i = 0; i < c.length; i++) {
    const tr = tbl.insertRow();
    for (let j = 0; j < 3; j++) {
      const td = tr.insertCell();
      var x = document.createElement('INPUT');
      x.setAttribute('type', 'number');
      x.setAttribute('class', 'username');
      td.appendChild(x);
      td.style.border = '2px solid yellow';
    }
  }
  document.body.appendChild(tbl);
}

$('.username').focus(function (event) {
  console.log('gd');
});


var currentBoxNumber = 0;
$('.username').keyup(function (event) {
  if (event.keyCode == 13) {
    textboxes = $('input.username'); 
    console.log('o');
    currentBoxNumber = textboxes.index(this);
    if (textboxes[currentBoxNumber + 1] != null) {
      nextBox = textboxes[currentBoxNumber + 1];
      nextBox.focus();
      nextBox.select();
      event.preventDefault();
    } else {
     
      const bd = document.body,
      tbl = document.getElementById('tab_1');
      
      const tr = tbl.insertRow();
      for (let j = 0; j < 3; j++) {
        const td = tr.insertCell();
      var x = document.createElement('INPUT');
        x.setAttribute('type', 'number');
        x.setAttribute('class', 'username');
        td.style.border = '2px solid green';
        td.appendChild(x); 
      }
      bd.appendChild(tbl);
    }
    return false;
  }
});

有人能帮我吗？谢谢
我尝试使用带有一些键的函数，但无法识别ID

JavaScript

来源：https://stackoverflow.com/questions/75103275/getelementbyid-doesnt-work-when-the-element-is-created

1条答案

按热度按时间

v9tzhpje1#

这里的问题不是getElementById没有通过ID找到元素，而是事件绑定发生在它绑定的元素存在之前。
脚本中的事件顺序为：
1.创建tableCreate函数。
1.将focus事件绑定到.username元素。
1.将keyup事件绑定到.username元素。
1.在文档onload上执行tableCreate()
.username元素在tableCreate函数中创建，该函数在绑定事件 * 之后 * 执行。
在绑定事件时，您基本上是在（对jQuery）说：* 获取所有.username元素，并将此事件绑定到它们 *。但是因为这些元素还不存在，所以没有绑定任何内容。
有两种方法可以在脚本中修复此问题：

在绑定事件之前执行tableCreate()。
这将确保首先创建元素。
将事件侦听器绑定到document，并使用jQuery's context将事件过滤为.username元素（首选）

第2点在绑定 * 单个 * 事件监听器时使用起来更简单，它将在监听器绑定后处理添加到DOM的元素的事件（因为document始终存在）。
示例：

// Bind Target  Context
// |            |   
// v            v
$(document, '.username').focus(...);

$(document, '.username').keyup(...);

更新日期：2023年1月15日

与最初的答案一样，当您绑定keyup处理程序时，您绑定到了绑定发生时可用的.username元素。
在该语句之后添加的任何新的.username元素将不具有绑定。
根据我上面的第二个建议，您可以将事件侦听器绑定到document，并为jQuery提供一个上下文过滤器，以便为其执行侦听器。
为了完整起见，我已经使用这个上下文过滤器更新了您的代码，并且还简化了侦听器，以便允许它将焦点转移到下一行，即使在添加该行之后也是如此。

// Bind listener to document and filter by `.username`.
$(document, '.username').keyup(function (event) {
  if (event.keyCode !== 13) return; // Quick exit if not Enter key

  event.preventDefault(); // Prevent default straight away

  let textboxes = $('.username'); // Use `let` as we'll re-assign if we add more rows
  console.log('Current textboxes.length', textboxes.length);

  const currentBoxNumber = textboxes.index(event.target); // Search using `event.target` because `this` is the `document` as it's the element the listener is bound to, but the event's target is sourced from the `.username` element

  const nextBoxIndex = currentBoxNumber + 1;
  const hasNextCell = Boolean(textboxes[nextBoxIndex]); // false if no cell found

  if (!hasNextCell) {
    add_row(); // Create the next row if there isn't the next cell
    textboxes = $('.username'); // Query for textboxes again since we've added some more
    console.log('Updated textboxes.length', textboxes.length);
  }

  const nextBox = textboxes[nextBoxIndex];
  nextBox.focus();
});

// Bind to document and filter to `.username`
$(document, '.username').focus(function (event) {
  console.log('on_focus');
});

赞(0）回复(0）举报 2023-01-16

我来回答

javascript 创建元素时getElementByID不起作用

1条答案

更新日期：2023年1月15日

相关问题

热门标签

最新问答