javascript - jQuery 从不同的 div 单击时 append 到 div

Question

我有一个 div 动态插入的在线用户:

<div id="users">
  <div class="privateMessage" data="John">John</div>
  <div class="privateMessage" data="Maria">Maria</div>
  <div class="privateMessage" data="Tony">Tony</div>
</div>

然后我有一个用于私有(private)消息的 div:

<div id="messageBox">
</div>

现在，当我单击用户时，我正在努力如何在 messageBox 内动态 append div 。

我需要的是下面这个:

<div id="messageBox">
   //when I click on John from users div this below should be appended
   <div class="private-chat" data-conversation-between="John"></div>
  //when I click on Maria from users div this below should be appended and John above
  //will be hidden
   <div class="private-chat" data-conversation-between="Maria"></div>
  //when I click on Tony from users div this below should be appended and John and Maria
  //will be hidden
   <div class="private-chat" data-conversation-between="Tony"></div>
</div>

无论我尝试什么，messageBox 内的 div 都会被 append 多次。

有人可以帮我用 jQuery 解决这个问题吗？

链接:fiddle

Answer 1

像这样的事情怎么样？

http://jsfiddle.net/thetimbanks/hfuurcL7/

click 事件被委托(delegate)，因为用户可以动态添加到列表中。我还在 messageBox 中搜索该用户的现有 div，以免添加另一个。

在此处添加代码不仅仅是链接到 fiddle :

HTML

<div id="users">
  <div class="privateMessage" data-user="John">John</div>
  <div class="privateMessage" data-user="Maria">Maria</div>
  <div class="privateMessage" data-user="Tony">Tony</div>
</div>

<div id="messageBox">
</div>

js

$("#users").on("click", ".privateMessage", function() {

    var user = $(this),
        private_chat = $("#messageBox .private-chat[data-conversation-between='" + user.data("user") + "']");

    if (private_chat.length == 0) {
        private_chat = $('<div class="private-chat" data-conversation-between="' + user.data("user") + '">Chat with ' + user.data("user") + '</div>');
        $("#messageBox").append(private_chat);
    }

    private_chat.show().siblings().hide();
});