主页 / 问题 / 1092949
Accepted
Сергей Мишин
Asked:2020-03-10 20:25:34 +0000 UTC2020-03-10 20:25:34 +0000 UTC

仅当您将鼠标移到一侧时，才能渲染“更改”事件

  • 772

有一个简单的代码：

let freeNumbers = [3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99];

$(document).on('change', '#element-counter', showTableChildrenCount);
$(document).ready(() => showTableChildrenCount());

function showTableChildrenCount() {
    let count = parseInt($('#element-counter').val());
    let testTableTr = $('#test tr');
    let itemsHtml = '';
    
    testTableTr.html('');

    for (let i = 0; i <= count - 1; ++i){
      itemsHtml += `<td class="children-counter-item">${freeNumbers[i]}</td>`;

      // let el = $('<td class="children-counter-item"></td>').html(freeNumbers[i]);
      // testTableTr.append(el);
    }

    testTableTr.html(itemsHtml);    
    console.log(111);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="number" id="element-counter" name="test" value="1" min="0">
	
<table id="test">
  <tr></tr>
</table>

在事件change中，声明数组中的数字应该被取出并显示在表格中。但是，这并不是每次在活动期间都会发生，而是会出现一些小故障：第一次工作时，只有当您将鼠标移到一边时，才会在第二、第三、第四次等之后显示信息（不是与 keyup 事件混淆）。也就是说，就像渲染一样，需要告诉浏览器更新窗口的信息并重绘。为什么会这样？以及如何修复它，以便每次事件发生时都发生渲染change？

javascript

2 个回答

  1.     let freeNumbers = [3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99];

    let input = document.getElementById('element-counter'); // Получаем элемент input
    input.oninput = showTableChildrenCount; // При изменении выполняем функцию

    function showTableChildrenCount() {
        let count = parseInt(input.value); // Получаем число из строки
        let testTableTr = document.getElementById('test'); // Получаем таблицу по id
        let z = document.createElement('tr'); // Создаём tr

        for (let i = 0; i <= count - 1; ++i){
            let itemsHtml = document.createElement('td'); // создаём td
            itemsHtml.className = 'children-counter-item'; // Проставляем класс
            itemsHtml.innerText = freeNumbers[i]; // Добавляем текст
            z.appendChild(itemsHtml); // Каждый td добавляем в tr
        }
        testTableTr.innerHTML = ''; // Очищаем элемент
        testTableTr.appendChild(z); // Добавляем child
    }
    <input type="number" id="element-counter" name="test" value="1" min="0">

<table id="test">
</table>

    • 3
  2. Best Answer

    看了@Denis640Kb 的回答，就明白为什么它不起作用了。

    事实证明，在具有类型的字段上number，您需要使用事件oninput，而不是onchange。然后一切都会正常工作。

    • 1

相关问题