Jupyter Lab/Notebook按钮点击事件调用Javascript无输出问题咨询

问题原因 #

IPython.display.Javascript() 实例只有在被作为单元格的顶层输出渲染时，才会被Jupyter前端捕获并执行对应的JS代码。按钮的点击回调函数是在内核侧异步触发的，回调内生成的Javascript实例没有被主动推送到前端渲染流程，相当于直接被丢弃，不会传递到浏览器执行。

解决方法 #

方案1：主动推送JS到前端（适用需要内核侧先处理逻辑的场景） #

在回调函数中用display()主动将Javascript实例输出，即可被前端捕获执行，修改后可运行的代码如下：

import ipywidgets as widgets
from IPython.display import Javascript, display

button = widgets.Button(
   description='Button',
   disabled=False,
   button_style='', 
   tooltip='Button',
   icon='check' 
)

def on_button_clicked(b):
   print("on_button_clicked called")
   my_js = """
   console.log('Hello world2!');
   """
   # 核心修改：主动display将JS对象推送到前端
   display(Javascript(my_js))
   print("on_button_clicked call ended")
   
button.on_click(on_button_clicked)

display(button)

方案2：直接绑定前端侧点击事件（适用纯前端交互场景） #

如果点击逻辑不需要内核参与，可以直接给按钮绑定前端原生JS事件，不需要走内核回调，响应速度更快，代码如下：

import ipywidgets as widgets
from IPython.display import Javascript, display

button = widgets.Button(
   description='Button',
   disabled=False,
   button_style='', 
   tooltip='Button',
   icon='check' 
)

# 直接给当前按钮绑定前端点击事件，不需要内核参与
display(Javascript(f"""
document.getElementById('{button.model_id}').addEventListener('click', () => {{
  console.log('Hello world2!');
}})
"""))

display(button)

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