自动增量功能对静态文本框生效,动态追加文本框不生效如何解决
问题原因
你现有的自动增量逻辑仅在页面初次加载时执行了一次,仅能处理当时已存在的静态文本框元素。你后续通过AJAX异步请求成功后动态插入的.something类文本框是在初始逻辑执行完毕后才生成的,自然不会被原有逻辑覆盖,因此自动增量功能失效。
解决方法
直接在你动态把生成的HTML插入到页面的代码之后,追加你的自动增量遍历逻辑即可:
// 原有插入DOM的代码 document.getElementById("result").innerHTML = html; // 新增以下自动增量逻辑 var list = document.getElementsByClassName("something"); for (var i = 0; i < list.length; i++) { list[i].value = (i + 1); }
优化建议
- 如果后续还有其他新增文本框的操作,可以把上述自动增量逻辑封装为单独的函数,每次新增完文本框后调用一次即可,避免重复编写代码。
- 也可以在动态生成文本框时直接赋值序号,无需后续遍历DOM,性能更高效:
在生成HTML的循环外先定义计数器:
// 放在循环生成HTML代码之前定义计数器 let somethingCount = 1;
生成.something类文本框时直接填写value值:
html += `<input type="text" class="something" name="something" value="${somethingCount++}">`
内容的提问来源于stack exchange,提问作者Ulquiorra Schiffer
相关产品推荐
相关产品推荐

