Provavelmente existem algumas maneiras de resolver isso, mas vamos tentar a maneira “correta”, usando os hooks de personalização adequados.
Quando você adiciona HTML à seção de rodapé de um tema, o Discourse faz algum processamento para evitar que ele se mova entre transições de página ou quando mais elementos são adicionados com rolagem infinita.
Ele é adicionado como um componente custom-html aqui.
Se você examinar o código do componente, verá que ele dispara um evento do aplicativo quando é renderizado.
Esse é o hook que você precisa usar.
Como usá-lo?
Existe um método no plugin-api que permite executar código quando um evento específico do aplicativo é disparado.
Como já sabemos o nome do evento, podemos usá-lo da seguinte forma:
api.onAppEvent("inserted-custom-html:footer", () => {
// faça seu trabalho aqui
});
Como este é um método da API de plugins, você precisa alterar o tipo da sua tag script para text/discourse-plugin, assim:
<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
// faça seu trabalho aqui
});
</script>
O trecho acima será executado sempre que o rodapé for renderizado. Assim, você agora pode fazer algo como isso:
<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
$(".footer-div #footerNavDiv").click(function () {
console.log("evento de clique capturado");
// faça seu trabalho aqui para o evento de clique
});
});
</script>
Você pode ler mais sobre a API de plugins aqui