добавить элемент только один раз на событие click

Question

Как проверить, существует ли элемент перед выполнением обработчика события, потому что в моем случае каждый раз, пока я нажимаю ссылку, добавляется новый чатбокс, с другой стороны, как чтобы обнаружить, что нет больше места по горизонтали для Chatbox

$('.PBChatFriendsList > li a').on('click',function(){ 
 
\t \t \t var \t $username = $(this).data('username'), 
 
\t \t \t \t $chatBoxHeader = $('<div>',{'class': 'chatBoxHeader'}).append("<h4>" + $username + "</h4>"), 
 
\t \t \t \t $messsageContent = $('<div>',{'class': 'messsageContent'}), 
 
\t \t \t \t $messageContainer = $('<div>',{'class':'messageContainer'}).append($messsageContent), 
 
\t \t \t \t $chatBoxForm = $('<form>',{method : 'post', id : 'chatBoxReplayForm'}), 
 
\t \t \t \t $chatBoxInput = $('<div>',{'class':'chatBoxInput'}).append($chatBoxForm), 
 
\t \t \t \t $chatBoxbody = $('<div>',{'class':'chatBoxbody'}).append($messageContainer); 
 
\t \t \t \t $chatBox = $('<div>',{'class' : 'chatBox opened _PBTab'}).append($chatBoxHeader,$chatBoxbody,$chatBoxInput); 
 
\t \t \t $('.chatBoxGroup').prepend($chatBox); 
 
\t \t \t \t 
 
\t \t \t 
 
\t \t });

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

Answer 1

Вы можете проверить, если Chatbox уже существует в 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 
    } 
});