如何在执行事件处理程序之前检查元素是否存在，因为在我的情况下，每次只要我点击一个链接就会附加一个新的聊天框，另一方面如何检测没有更多的空间水平的聊天框
$('.PBChatFriendsList > li a').on('click',function(){
var $username = $(this).data('username'),
$chatBoxHeader = $('<div>',{'class': 'chatBoxHeader'}).append("<h4>" + $username + "</h4>"),
$messsageContent = $('<div>',{'class': 'messsageContent'}),
$messageContainer = $('<div>',{'class':'messageContainer'}).append($messsageContent),
$chatBoxForm = $('<form>',{method : 'post', id : 'chatBoxReplayForm'}),
$chatBoxInput = $('<div>',{'class':'chatBoxInput'}).append($chatBoxForm),
$chatBoxbody = $('<div>',{'class':'chatBoxbody'}).append($messageContainer);
$chatBox = $('<div>',{'class' : 'chatBox opened _PBTab'}).append($chatBoxHeader,$chatBoxbody,$chatBoxInput);
$('.chatBoxGroup').prepend($chatBox);
});.PBChatFriendsList >li > a{padding: 2px 14px 2px 8px; display: block; height: 38px; box-sizing: border-box;}
.PBChatFriendsList >li:hover{background-color: #f5f1f1;}
.friendChatPhoto{float: left; width: 34px; height: 34px; display: inline-block;}
.chatFriendFullName{padding: 0 0 0 8px; float: left; display: inline-block; text-overflow:ellipsis; overflow: hidden;}
.chatFriendFullName > span{font-size: 0.78em; line-height: 34px; color: #555454;}
.chatFriendStatus{float: right; display: inline-block;}
.userConDispositif{font-weight: 500; color: green; font-size: 0.7em; line-height: 30px; display: inline-block;}
/*--------------chatbox--------------------*/
.PBchatBoxContainer{position: absolute; bottom: 0; width: 256px; height: 300px; background-color: white;}
.PBChatBoxContainerRight{left: auto; right: 300px; bottom: 0; position: fixed; z-index: 40;}
.PBBlock{margin: 0 14px 0 0;}
.chatbContainer{float: right;}
.chatBox.opened{margin-left: 10px; width: 240px; background-color: green;}
._PBTab{height: 28px;}
.chatBoxs, .chatBoxGroup, .chatBoxGroup > div{float: left; position: relative;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="PBChatFriendsContainer clearfix">
<ul class="PBChatFriendsList">
<li>
<a href="#" data-username="John Diggle">
<div class="chatFriendContainer">
<div class="friendChatPhoto">
<img src="img/chat_user_photo.jpg" alt="tarek hatem">
</div>
<div class="chatFriendFullName">
<span>John Diggle</span>
</div>
<div class="chatFriendStatus">
<div class="userConDispositif">web</div>
<i class="online-icon"></i>
</div>
</div>
</a>
</li><!--endof list element-->
<li>
<a href="#" data-username="Tarek Hatem">
<div class="chatFriendContainer">
<div class="friendChatPhoto">
<img src="img/chat_user_photo.jpg" alt="tarek hatem">
</div>
<div class="chatFriendFullName">
<span>Tarek Hatem</span>
</div>
<div class="chatFriendStatus">
<div class="userConDispositif">web</div>
<i class="online-icon"></i>
</div>
</div>
</a>
</li><!--endof list element-->
<li>
<a href="#" data-username="Malcom Merlyn">
<div class="chatFriendContainer">
<div class="friendChatPhoto">
<img src="img/chat_user_photo.jpg" alt="tarek hatem">
</div>
<div class="chatFriendFullName">
<span>Malcom Merlyn</span>
</div>
<div class="chatFriendStatus">
<div class="userConDispositif">web</div>
<i class="online-icon"></i>
</div>
</div>
</a>
</li><!--endof list element-->
</ul>
</div>
<div class="chatbox_outer_container">
<div class="PBChatBoxContainer PBChatBoxContainerRight">
<div class="PBBlock clearfix">
<div class="chatbContainer clearfix">
<div class="chatBoxs">
<div class="chatBoxGroup clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
您可以在追加之前检查聊天框是否已存在于DOM中：
$('.PBChatFriendsList > li a').on('click',function(){
if($('.chatBoxHeader').length == 0){
//Code to append chatbox to the dom
}
});
如果有多个.chatBoxHeader，您可以为每个id属性分配唯一的属性，然后
$('.PBChatFriendsList > li a').on('click',function(){
if($('#unique-id-for-each-chatheader').length == 0){
//Code to append chatbox to the dom
}
});