Question

我在一些个人项目中工作，就像聊天的前端一样。所以我有我的用户，我有一个JSON与在线和离线用户列表。当网站第一次加载时，我还加载了自定义滚动的插件，并使用jquery ui创建可拖动的元素。我想知道的是，如果有一种方法可以使添加到正文的新元素（聊天窗口）自动滚动，并且每次添加它时都有这个自定义滚动条。到目前为止，我做了类似的事情：

$(document).on("ready", functions);
function functions() {
    $("#contacts-container").slimScroll({
    height: '220',
    size: '10px',
    position: 'right',
    color: '#535a61',
    alwaysVisible: false,
    distance: '0',
    railVisible: true,
    railColor: '#222',
    railOpacity: 0.3,
    wheelStep: 10,
    disableFadeOut: false
});

$(".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(){
console.log("clicked");
var user = $(this).html();
$.getJSON("js/options.json", function(json){
    var itemsLength = json.chat.OnlineContacts.length;
    for ( var i = 0; i < itemsLength; i++) {
        var jsonUserName = json.chat.OnlineContacts[i].name;
        var jsonUserStatus = json.chat.OnlineContacts[i].status;
        var jsonUserAvatar = json.chat.OnlineContacts[i].picture;
        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"});
}

在DisplayChatWindow上我附加了代表聊天窗口的s div的模板，但我还需要重新添加slimScroll函数和draggabla函数，但是我希望它们在我追加它后自动拥有它，我是学习Java脚本，所以我不知道是否使用了一个对象，我可以实现这一点，或者是否有另一种方式，基本上我在这里所做的最多，我知道如何做到目前为止，如果你们能帮助我，我将不胜感激:)

Answer 1

我相信这应该有效。

$(document).on("ready", function() {
    functions();
    $(document).bind('DOMNodeInserted', function() {
        $(".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"     
        });
   }); 
});

如何使用jquery为DOm准备好后添加的对象分配属性或函数

1 个答案: