jQuery的.click方法不生效 原生addEventListener报null错误如何解决

问题根因 #

你的JS代码执行时机早于对应DOM元素的渲染时机，导致document.getElementById('food')返回null，jQuery选择器$('#food')也匹配不到任何元素，自然无法绑定点击事件。

解决方案 #

方案1：调整JS代码放置位置 #

把你的所有JS代码放在</body>闭合标签之前，确保浏览器解析完所有DOM元素后再执行JS逻辑：

<body>
  <input type="text" id="food">
  <!-- 其他页面内容 -->
  <script>
    // 你的JS代码写在这里
  </script>
</body>

方案2：用DOM加载完成监听包裹代码 #

无需调整JS文件引入位置，把业务逻辑包裹在DOM加载完成的回调中即可：

jQuery版本：

// 写法1：完整写法
$(document).ready(() => {
  $('#food').click(() => {
    console.log('working');
  })
})

// 写法2：简写版本
$(() => {
  $('#food').click(() => {
    console.log('working');
  })
})

原生JS版本：

document.addEventListener('DOMContentLoaded', () => {
  const foodEl = document.getElementById('food');
  foodEl.addEventListener('click', () => {
    console.log('working');
  })
})

方案3：#food为动态生成元素的场景 #

如果你的#food元素是页面加载完成后通过JS动态插入到页面中的，需要使用事件委托实现绑定：

jQuery版本：

// 把事件绑定到动态元素的上层已存在父级，这里用document做示例，实际建议用最近的静态父级替换
$(document).on('click', '#food', () => {
  console.log('working');
})

原生JS版本：

document.addEventListener('click', (e) => {
  if(e.target.id === 'food') {
    console.log('working');
  }
})

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