Separando HTML y JavaScript en Frasco

Hey tengo el siguiente problema:

Estoy creando una pequeña aplicación de matraz, y normalmente me limito a usar plantillas de bootstrap y jinja para obtener lo que quiero, pero esta vez necesitaba una versión un poco más personalizada. Para obtener un agarre, comencé con un ejemplo simple de uso de js y matraz personalizados para obtener el derecho básico. Pero vamos a entrar en detalles:

Supongamos que tengo una aplicación web de flask simple llamada app.py ubicada en my_app / que se ve así

from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(port=8080, debug=True) 

y el index.html correspondiente, que se encuentra en my_app / templates, es simplemente

    

Clicking here will make me dissapear

$(document).ready(function() { $("p").click(function(event){ $(this).hide(); }); });

luego veo el resultado esperado, es decir, puedo hacer clic en el párrafo para hacerlo desaparecer.

PERO: Me gustaría poner la parte javascript en un archivo main.js bajo estática / js /. al igual que:

 $(document).ready(function() { $("p").click(function(event){ $(this).hide(); }); }); 

y el index.html se convierte en:

    

Clicking here will make me dissapear

Lamentablemente no pasará nada. También he probado otras formas de referenciar el archivo de script, pero hasta ahora nada funciona. Tengo la impresión de que me falta algo realmente simple. ¡Gracias por adelantado!

url_for invocar la función url_for dentro de un marcado para que se resuelva la url correcta, es decir,

  

Considere seguir completamente la guía de inicio rápido, ya que le ayudará con otros problemas que pueda tener.