为列表中每个单击的链接向主体附加一个div

Question

我在facebook中有一个rightsidebar喜欢的朋友列表，我想在点击这个朋友列表时添加一个新的聊天框，我第一次点击它会将div附加到正文但是当我点击其他链接没有任何反应!!!

这是我的html的一部分 -

＆＃13;

＆＃13;

var chatBox = $('<div>',{'class' : 'PBchatBoxContainer'});
$('.PBChatFriendsList li a').each(function(index, el){
    $(this).on('click',function(){
	    $('body').append(chatBox);
	 });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="PBChatFriendsContainer clearfix">
    <ul class="PBChatFriendsList">
         <li>
             <a href="#">
                 <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-->                                    
    </u>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要定义一个新的聊天框＆＃39;每次单击链接时，在您的示例中.append在第一次单击后将不执行任何操作，因为该元素已附加到DOM。

您也可以删除.each，因为jQuery已经将事件处理程序附加到所有匹配的选择器。

＆＃13;

＆＃13;

$(function () {
  
  $('.PBChatFriendsList li a').on('click', function () {
    var chatBox = $('<div>',{'class' : 'PBchatBoxContainer'});

    $('body').append(chatBox);
  });

});

＆＃13;

.PBchatBoxContainer {
    float: left;
    margin-right: 5px;
}

.PBchatBoxContainer::after {
    content: 'chatbox'
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="PBChatFriendsContainer clearfix">
    <ul class="PBChatFriendsList">
         <li>
             <a href="#">
                 <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-->                                    
    </u>
</div>

＆＃13;

＆＃13;

＆＃13;