跳到主要内容

jQuery 表单交互和事件委托的常见写法

· 阅读需 2 分钟
一介布衣
一介布衣
全栈开发者 / 技术写作者

在 2013 年的前端页面里，表单交互经常是最能体现 jQuery 价值的地方。输入提示、即时校验、动态添加条目，这些需求放在一起时，如果代码组织得不好，很快就会出现重复绑定和状态混乱的问题。

表单交互最好从“读值和反馈”开始拆​

一个最基础的表单逻辑通常就三步：

  1. 取到输入值
  2. 判断是否合法
  3. 在明确位置给出反馈
$('#email').on('blur', function () {
  var value = $.trim($(this).val());

  if (!value) {
    $('.email-tip').text('邮箱不能为空');
    return;
  }

  $('.email-tip').text('格式已填写');
});

这个思路的好处是简单直接，后来再扩展规则时也不容易全部推倒重来。

动态节点不要直接绑死事件​

另一个高频场景是列表项通过脚本插入。比如“添加一项”“删除一项”这类操作，如果还是对现有节点逐个绑定 click，新增出来的节点通常就没反应了。

这时候事件委托很有用：

$('#todoList').on('click', '.remove-item', function () {
  $(this).closest('li').remove();
});

它背后的逻辑并不复杂，就是把监听放到一个稳定存在的父节点上，再根据触发来源判断实际目标。

交互规则最好集中在一处​

很多 jQuery 页面后面会变乱，不是因为 API 不够清晰，而是同一个表单被多个脚本文件分别处理。这里校验一次，那里提示一次，最后谁先执行、谁覆盖谁都很难说清楚。

如果条件允许，更推荐把同一块表单的事件和反馈尽量集中写在一起。这样以后排查问题时，不用满项目翻选择器。

小结​

jQuery 表单处理最值得保留的经验，不是某个具体函数，而是把“输入、判断、反馈”这条链路写清楚，再配合事件委托解决动态节点。把这两个模式掌握住，2013 年的大多数页面交互其实已经能应付得很稳。