JQuery para carregar o arquivo Javascript dinamicamente

Eu tenho um arquivo javascript muito grande que gostaria de carregar apenas se o usuário clicar em um determinado botão. Estou usando o jQuery como minha estrutura. Existe um método ou plug-in embutido que me ajudará a fazer isso?

Mais alguns detalhes: Eu tenho um botão "Adicionar comentário" que deve carregar o arquivo javascript do TinyMCE (juntei todas as coisas do TinyMCE em um único arquivo JS) e chame tinyMCE.init (...).

Não quero carregar isso no carregamento da página inicial, porque nem todo mundo clicará em "Adicionar comentário".

Eu entendo que posso apenas fazer:

$("#addComment").click(function(e) { document.write("<script...") });

mas existe uma maneira melhor / encapsulada?

Sim, use getScript em vez de document.write - ele permitirá um retorno de chamada assim que o arquivo for carregado.

Porém, convém verificar se o TinyMCE está definido antes de incluí-lo (para chamadas subseqüentes a 'Adicionar comentário'), para que o código se pareça com o seguinte:

$('#add_comment').click(function() {
    if(typeof TinyMCE == "undefined") {
        $.getScript('tinymce.js', function() {
            TinyMCE.init();
        });
    }
});

Supondo que você só precise chamá init-lo uma vez. Caso contrário, você pode descobrir a partir daqui :)

Sei que estou um pouco atrasado aqui, (cinco anos ou mais), mas acho que há uma resposta melhor do que a aceita da seguinte forma:

$("#addComment").click(function() {
    if(typeof TinyMCE === "undefined") {
        $.ajax({
            url: "tinymce.js",
            dataType: "script",
            cache: true,
            success: function() {
                TinyMCE.init();
            }
        });
    }
});

A getScript()função realmente impede o cache do navegador . Se você executar um rastreamento, verá que o script é carregado com uma URL que inclui um parâmetro de carimbo de data / hora:

http://www.yoursite.com/js/tinymce.js?_=1399055841840

Se um usuário clicar no #addCommentlink várias vezes, tinymce.jsserá recarregado a partir de um URL com carimbo de data e hora diferente. Isso anula o objetivo do cache do navegador.

===

Como alternativa, na getScript()documentação, há um código de amostra que demonstra como habilitar o cache criando uma cachedScript()função personalizada da seguinte maneira:

jQuery.cachedScript = function( url, options ) {

    // Allow user to set any option except for dataType, cache, and url
    options = $.extend( options || {}, {
        dataType: "script",
        cache: true,
        url: url
    });

    // Use $.ajax() since it is more flexible than $.getScript
    // Return the jqXHR object so we can chain callbacks
    return jQuery.ajax( options );
};

// Usage
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
    console.log( textStatus );
});

===

Ou, se você deseja desativar o cache globalmente, pode fazê-lo usando ajaxSetup()o seguinte:

$.ajaxSetup({
    cache: true
});