点击class为btn_modifier的按钮启用对应组禁用input_stock输入框问题

原代码的问题 #

• document.querySelector 仅返回第一个匹配的元素，页面中存在多个动态生成的.btn_modifier和.input_stock时，只会给第一个按钮绑定事件，也只会修改第一个输入框的状态
• 禁用属性名拼写错误，DOM元素的禁用属性是disabled，不是disable，导致状态修改不生效
• 未使用事件委托，直接对动态生成的元素绑定点击事件，会因为绑定执行时元素还没渲染到DOM中，导致事件绑定失效
• 未限定输入框的查找范围，点击按钮时需要操作的是当前行对应的输入框，不是全局所有输入框

正确实现代码 #

直接给静态父容器（也就是你渲染表格内容的ba元素）绑定事件委托即可：

// ba是你渲染tr内容的父容器，页面初始就存在
ba.addEventListener('click', function(e) {
  // 仅当点击的是修改按钮时执行逻辑
  if (e.target.classList.contains('btn_modifier')) {
    // 找到当前点击按钮所属的tr行
    const currentRow = e.target.closest('tr')
    // 查找当前行内所有的.input_stock输入框
    const stockInputs = currentRow.querySelectorAll('.input_stock')
    // 遍历移除所有输入框的禁用状态
    stockInputs.forEach(input => {
      input.disabled = false
    })
  }
})

额外注意 #

你当前的渲染代码中直接把div.show放在tr标签下作为直接子元素，不符合HTML规范（tr的直接子元素只能是td），可能会导致浏览器解析DOM结构异常，影响选择器查找元素，建议把.show容器移到td内部。

内容的提问来源于stack exchange，提问作者Jorge_RM