如何让jQuery事件监听器在部分元素不存在时仍正常工作？

嘿，我完全懂你碰到的麻烦！之前用原生JS写的时候，要是某个页面里没有button.buttona-1这个元素，document.querySelector()会返回null，接着调用addEventListener直接就报错了，导致其他正常的逻辑也跑不起来对吧？用jQuery就能完美解决这个问题，而且写法还更简洁。

给你两种靠谱的实现方式，根据你的需求选就行：

直接绑定事件（适合静态元素） #

jQuery的选择器哪怕匹配不到任何元素，调用.on()绑定事件也不会报错，只会默默跳过，完全不影响其他代码执行。你可以把原来的代码改成这样：

// 给buttona-1绑定点击事件
$("button.buttona-1").on("click", selectArts);
// 同理给buttona-2绑定对应的处理函数
$("button.buttona-2").on("click", selectOtherItems);

// 保留你原来的selectArts逻辑，把原生DOM操作换成jQuery写法更顺手
function selectArts() {
  unselectAll();
  // 这里替换成你要选中的复选框选择器
  $("input.arts-checkbox").prop("checked", true);
}

function selectOtherItems() {
  unselectAll();
  // 对应button2的复选框选中逻辑
  $("input.other-checkbox").prop("checked", true);
}

function unselectAll() {
  // 一键取消所有复选框选中状态
  $("input[type='checkbox']").prop("checked", false);
}

事件委托（适合动态加载的元素） #

要是你的按钮是后续动态添加到页面里的（比如通过AJAX加载），上面的直接绑定就失效了，这时候用事件委托更稳妥——把事件绑定到一个始终存在的父元素（比如document或者页面的主容器）上，不管按钮什么时候出现，点击事件都能触发：

// 事件委托绑定到document
$(document).on("click", "button.buttona-1", selectArts);
$(document).on("click", "button.buttona-2", selectOtherItems);

// 后面的处理函数和上面一样就行
function selectArts() {
  unselectAll();
  $("input.arts-checkbox").prop("checked", true);
}

// ...其他函数同上

这样改完之后，不管是页面1只有按钮1、页面2只有按钮2，还是页面3两个按钮都有，代码都能正常工作：存在的按钮会正确绑定监听器，不存在的就自动忽略，再也不会因为元素不存在报错啦！

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