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>