Cargar archivo javascript después de hacer clic en el botón

Estoy tratando de usar un conjunto de cuadros de texto para definir algunos datos dentro de mi archivo JavaScript. Entonces, en un cuadro de texto, ingrese el nombre del Equipo "Nombre del equipo", y el archivo javascript usa este cuadro de texto para almacenar el nombre de un equipo con el fin de imprimir un conjunto de soportes de torneo.

El archivo javascript está incluido en mi<head> así que se carga antes de que haya ingresado los datos en los cuadros de texto. Tengo este código para un botón en el html así:

script(type='text/javascript')
    $('#buttontest').click(function() {
        $('div.bracket').show();
        $('div.teamList').hide();
    });

Entonces, cuando se presiona el botón, todos los cuadros de texto están ocultos, y deben aparecer los corchetes con los nombres de los equipos definidos por el usuario ... aquí está el código al final de mi archivo javascript:

$(function() {
    $('#singleElim8').bracket({
        init: singleElim8Data
    })
  $('.bracket').hide();
});

Así que dentro de div.bracket tengo la clase # singleElim8 que usa el javascript. Pero, ¿cómo lo cambiaría para que este javascript para inicializar los corchetes solo se ejecute una vez que se haya hecho clic en el botón? De esa manera, los corchetes se procesan DESPUÉS de que se hayan completado los cuadros de texto. Cualquier ayuda que se aprecie.

Respuestas a la pregunta(2)

Su respuesta a la pregunta