I have this simple Dash application:
import dash import dash_bootstrap_components as dbc import dash_core_components as dcc import dash_html_components as html app = dash.Dash( __name__, server=server, routes_pathname_prefix='/dashboard/', external_stylesheets=[dbc.themes.DARKLY], external_scripts=[ { 'src': 'https://code.jquery.com/jquery-3.5.1.slim.min.js', 'integrity': 'sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=', 'crossorigin': 'anonymus' } ] ) app.layout = html.Div( id='big-app-container', children=[ html.Div( id='banner', className='banner', children=[ html.Div(id='banner-text', children=[html.H3('DAntE')]), html.Div(id='banner-session', children=[ html.Span(id='session-info'), html.Button('Login', id='session-btn'), html.Button('Sign Up', id='signup-btn') ] ) ] ) ] )
And the following JS file (assets/dash.js
):
$('#session-btn').click(function(){ console.log('ya'); });
Well, I click the corresponding button, but nothing happens. I don’t know why, because it apparently loads the script. In fact, if I write down the function on Chrome’s console, then it works as expected.