javascript - ドキュメントの準備ができた後に追加された要素へのプラグインの適用

Question

こんにちは、「チャット ウィンドウ」を開くことになっているプロジェクトで作業しています。このウィンドウは、カスタム スクロール バー用のプラグインを使用します。JSON にアクセスして人の名前とステータスの変数を取得し、アンダースコア付きのテンプレートを生成して HTML の本文に追加します。これを行うと、新しいウィンドウ チャットはカスタム スクロール プラグインを取得しません。 . すでに私が得たものはこのようなものなので、これを達成する方法を知っているかどうか尋ねたいと思います。

$(document).on("ready", functions);
function functions() {  

    //  My jquery plugin 
    $(".messages-container").slimScroll({
    height: '200',
    size: '10px',
    position: 'right',
    color: '#535a61',
    alwaysVisible: false,
    distance: '0',
    railVisible: true,
    railColor: '#222',
    railOpacity: 0.3,
    wheelStep: 10,
    disableFadeOut: false,
    start: "bottom"     
    });
    $("#online .user-name").on("click", checkUser);
}

function checkUser(){
    //this is the function that acces the JSON then pass parameter to another function to open the chat window.(I removed some code to go better straight to the point).
    if(user == jsonUserName){
    displayChatWindow(jsonUserName, jsonUserStatus, jsonUserAvatar);
    }

function displayChatWindow(user, status, avatar){
    console.log(avatar);
    var template = _.template($("#windowTemplate").html(), {userName: user, userStatus: status, userAvatar: avatar});
    $("body").prepend(template);
    $(".messages-container").slimScroll({
        height: '200',
        size: '10px',
        position: 'right',
        color: '#535a61',
        alwaysVisible: false,
        distance: '0',
        railVisible: true,
        railColor: '#222',
        railOpacity: 0.3,
        wheelStep: 10,
        disableFadeOut: false,
        start: "bottom"     
    });
    $(".friend-window").draggable({handler: ".header"});
    $(".chat input, .chat textarea").on("focus", cleanInputs);
    $(".chat input, .chat textarea").on("blur", setInputs);
}

これまでのところ、テンプレートを追加してすべての関数を再呼び出ししています。皆さんがこれを達成する方法を理解するのを手伝ってくれて、またいくつかのアドバイスをいただければ幸いです。コードをうまく構築している場合、または絶対に間違っている場合、私は学んでおり、これは私にとって良いことです、ありがとう!

テンプレはこんな感じ

<script type="text/template" id="windowTemplate">
        <div class="chat friend-window">
            <div class="status">
                <input type="text" value="Preparando el reporte anual :)">
            </div>
            <div class="header">
                   <a href="#">
                       <figure class="profile-picture">
                           <img src= <%= userAvatar %> alt="Foto-perfil" titte="Foto perfil">
                       </figure>
                   </a>
                   <h5>
                       <a href="#" id="username"> <%= userName %> </a>
                       <a href="#" id="conection-status"> <%= userStatus %></a>
                   </h5>
                   <figure class="minimize minimize-others">
                       <a href="#"><img src="img/minimize.png" alt="minimize" title="minimize"></a>
                   </figure>
               </div>
               <div class="messages-section">
                   <div class="messages-container">
                        <ul>
                            <li>
                                <div class="message-recieved">
                                    <div class="border-top"></div>
                                    ola k  ase?..chateando o ke ase?
                                    <div class="border-bottom"></div>
                                </div>
                           </li>
                            <li>
                                <div class="message-sent">
                                    <div class="border-top"></div>
                                    bien gracias, queria saber como vas con el reporte, te falta mucho para terminarlo?
                                    <div class="border-bottom"></div>
                                </div>
                            </li>
                            <li>
                                <div class="message-recieved">
                                    <div class="border-top"></div>
                                    Ya esta asi o mas terminado :)
                                    <div class="border-bottom"></div>
                                </div>
                            </li>
                            <li>
                                <div class="message-sent">
                                    <div class="border-top"></div>
                                    ola ke ase, preparando el reporte anual o k ase?
                                    <div class="border-bottom"></div>
                                </div>
                            </li>
                            <li>
                                <div class="message-recieved">
                                    <div class="border-top"></div>
                                    Ya esta asi o mas terminado :)
                                    <div class="border-bottom"></div>
                                </div>
                            </li>                                         
                        </ul>
                    </div>
                    <div class="message-area">
                        <textarea rows="2" cols="10" value="Escribe tu mensaje...">Escribe tu mensaje...</textarea>
                    </div>
            </div>
        </div>
    </script>