将插件应用于文档准备好后添加的元素

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);
}

到目前为止，我所做的是附加模板并重新调用所有函数。如果你们能帮助我弄清楚如何实现这一目标，我也将不胜感激，还有一些建议如果我构建好我的代码或我做错了，我正在学习，这对我有好处，谢谢你们！ / p>

这就是模板的样子

<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>