JQuery .bind()事件在SharePoint页面刷新后失效问题

核心原因是SharePoint结合Shortpoint的页面加载机制会在刷新后重新渲染DOM元素，而change()或bind('change')仅对首次加载时存在的元素绑定事件，新渲染的元素不会继承这些绑定。

替换绑定方式为事件委托 #

把原来的绑定代码换成on()方法的事件委托写法，将事件绑定到静态存在的父元素（比如document或固定的表单容器）：

原代码（失效写法）：

// 首次加载有效，刷新失效
$('#referrer_relationship').bind('change', function() {
  // 你的业务逻辑
});

// 首次加载有效，刷新失效
$('.interestCheckbox').bind('change', function() {
  // 你的业务逻辑
});

修改后的代码（有效写法）：

// 事件委托：绑定到document，兼容动态生成的元素
$(document).on('change', '#referrer_relationship', function() {
  // 你的业务逻辑
});

$(document).on('change', '.interestCheckbox', function() {
  // 你的业务逻辑
});

优化建议 #

如果表单有固定存在的父容器（比如带id="referral-form"的div），用它代替document能提升性能，因为事件冒泡层级更少：

$('#referral-form').on('change', '#referrer_relationship', function() {
  // 你的业务逻辑
});

事件委托的原理是将事件绑定到始终存在的父元素，当事件从子元素冒泡到父元素时，再判断触发元素是否匹配目标选择器，这样不管元素是首次加载还是后续动态渲染，都能正常触发事件。

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