jQuery 将当前元素项绑定(bind)到整个窗口

Question

我正在为我正在构建的社交网络创建一个聊天客户端，作为一个有趣的学习项目。

我有一个聊天窗口项目，每次从好友列表中选择用户时，该项目都会附加到我的文档中。

我想在聊天窗口中绑定(bind)两个元素来执行不同的操作，我该如何操作？目前我正在做以下事情:

// Collapse the current chat window
$('body').on('click', '.title', function(){
    $(this).animate({'margin-top' : '-100px'}, 100);
});

// Close the current chat window
$('body').on('click', '.close', function(){ 
           // get the current chat window
   var window = $(this).getElementById('#chatWindow');
   window.remove();
});

我认为我在传递“this”的引用时做错了，我对 javascript 相当新手，所以如果我的问题太简单，请原谅我。

感谢您的宝贵时间。

注意 - 聊天窗口代码

<div id="chatWindow" class="chat1">
    <div class="title"><span><div id="online"></div>Alex Sims</span><a class="close" href="#">X</a></div>
    <div class="message"><p class="msg1">Hey, are you still stuck?</p></div>
    <div class="text"><input type="text" placeholder="Message..."></div>    
</div>

Answer 1

事件处理程序附件 on() 的结构为 .on( events [, selected ] [, data ], handler(eventObject) )，因此 this 指的是传递的选择器。请参阅api.jquery.com/on 。最好在文档上附加事件。

$(document).on('click', '.title', function () {
    $(this).animate({
        'margin-top': '-100px'
    }, 100);
}).on('click', '.close', function (e) {
    //this refers to '.close'
    //use `closest()` to travel up the DOM tree until it finds '#chatWindow'
    $(this).closest('#chatWindow').remove();
});