Office JS绑定创建及BindingDataChanged事件监听失效问题排查

你的代码里有几个关键问题导致事件没触发，我给你拆解一下：

主要问题点 #

• 事件绑定时机不对：你在Excel.run里刚发起创建binding的请求，就立刻去用Office.select绑定事件，但这时候binding还没真正同步到Office客户端（context.sync()还没执行完），相当于你在找一个还不存在的对象，自然绑定不上。
• jQuery选择器写错了：onBindingDataChanged里的$("output")少了#，应该是$("#output")，不然找不到页面上的输出元素，就算事件触发了也看不到结果。
• API使用不够规范：用Office.select是旧版API的写法，现在更推荐直接通过Excel JS API的binding对象来绑定事件，兼容性和可靠性更好。

修正后的完整代码 #

Office.initialize = function(){ 
  $(document).ready(function() { 
    Excel.run(function(context){ 
      // 创建binding并获取对应的对象
      const binding = context.workbook.bindings.add("Sheet1!A1:A2", "Range", "A_binding"); 
      $("#output").append("<br /><br /> Finished Pre-Sync"); 
      
      return context.sync().then(function(){ 
        $("#output").append("<br /><br />Post Sync");
        // 同步完成后，通过binding对象绑定事件
        binding.addHandlerAsync(Office.EventType.BindingDataChanged, onBindingDataChanged);
      }); 
    }).catch(function(error){ 
      $("#debugger").append("error: " + JSON.stringify(error.debugInfo)); 
    }) 
  }); 
} 

function onBindingDataChanged(eventArgs){ 
  // 修正选择器，添加#
  $("#output").append("<br />updated"); 
  // 如果需要处理数据，这里可以继续用Excel.run操作
  // Excel.run(function(context) {
  //   const binding = context.workbook.bindings.getItem("A_binding");
  //   const range = binding.getRange();
  //   range.load("values");
  //   return context.sync().then(() => {
  //     console.log(range.values);
  //   });
  // });
}

关键修改说明 #

1. 把事件绑定移到sync之后：只有当context.sync()执行完成，binding才真正在客户端创建成功，这时候绑定事件才有效。
2. 直接用创建的binding对象绑定事件：我们在创建binding的时候就获取了它的对象，同步完成后直接用这个对象调用addHandlerAsync，比Office.select更直接可靠。
3. 修正jQuery选择器：把$("output")改成$("#output")，确保能正确找到页面上的输出元素。

这样修改后，你再修改Sheet1!A1:A2的内容，就能看到页面上输出"updated"了。

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