JQuery добавить в Div по щелчку из различных 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> 

Тогда у меня есть div для частных сообщений:

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

Теперь, Я пытаюсь динамически добавить div внутри messageBox, когда я нажимаю на пользователя.

Что мне нужно, это ниже:

<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 получить добавляется более чем один раз.

Может кто-нибудь помочь мне решить эту проблему с помощью jQuery?

Ссылка: fiddle

Answer 1

А что-то вроде этого?

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

click событие делегировано, так как пользователи могут быть добавлены в список динамически. Я также ищу messageBox для существующего div для этого пользователя, чтобы не добавлять еще один.

Добавление кода здесь, чтобы не просто ссылка на скрипку:

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(); 
}); 

Answer 2

После короткого разъяснения в комментариях, я отправляю рабочий раствор:

$('.privateMessage').on('click', function (e) { 
    $messageBox = $('#messageBox'); 
    var whoIsIt = $(this).attr('data'); 

    var isAlreadyThere = $messageBox.find('div[data-conversation-between="' + whoIsIt + '"]').length; 

    if (isAlreadyThere == 0) { 
    $messageBox.append('<div class="private-chat" data-conversation-between="' + whoIsIt + '"></div>'); 
    } 
}); 

jsfiddle: http://jsfiddle.net/pLe01k57/2/

В принципе: проверить, если #messageBox уже есть разговор (div) с щелкнул в систему пользователя, а если нет - добавьте его туда.

Answer 3

Как насчет этого?

$('.privateMessage').on('click', function (e) { 
    var whoIsIt = $(this).attr('data'); 
    $('#messageBox').append('<div class="private-chat" data-conversation-between="' + whoIsIt + '"></div>'); 
    $(this).unbind(); 
}); 

https://jsfiddle.net/lemoncurry/5cq2sw8m/1/

В основном решение bardzusny по выше плюс $ (это) .unbind().

Answer 4

Вы должны избегать использования атрибута data таким образом.

Read more about .data() attribute

HTML:

<div id="users"> 
    <div class="privateMessage" data-selected="" data-who="John">John</div> 
    <div class="privateMessage" data-selected="" data-who="Maria">Maria</div> 
    <div class="privateMessage" data-selected="" data-who="Tony">Tony</div> 
</div> 
<div id="messageBox"></div> 

Сценарий:

$("#users").on("click", '.privateMessage', function() { 
    if(!$(this).data('selected')){ 
     $(this).data('selected', 'selected'); 
     // do not use '.attr()', use natvie jQuery '.data()' 
     var $msgTo = $(this).data('who'); 
     $("#messageBox").append("<div class='private-chat' data-conversation-between=" + $msgTo + ">"+$msgTo+"</div>"); 
    } 
}); 

DEMO

---

Альтернативно, вы можете просто использовать событие .one() и повторно активировать его для конкретной кнопки (f.ex. после того, как человек был удален из чата):

function singleClick(el) { 
    $(el).one("click", function() { 
     var $msgTo = $(this).data('who'); 
     $("<div class='private-chat' data-conversation-between=" + $msgTo + ">"+$msgTo+"</div>").appendTo("#messageBox"); 
    }); 
} 

singleClick('.privateMessage'); 

DEMO (with delete example using .one())

Answer 5

Надеется, что это делает то, что вы ожидаете .can проверки данных-атрибут перед добавлением Дивов-х.

$('.privateMessage').on('click', function(e) { 
 
    var isPresent = false; 
 
    var whoIsIt = $(this).attr('data'); 
 
    $('#messageBox .private-chat').each(function(index, element) { 
 
    if ($(this).attr('data-conversation-between') == whoIsIt) { 
 
     isPresent = true; 
 
    } 
 
    }); 
 
    if (!isPresent) { 
 
    $('#messageBox').append('<div class="private-chat" data-conversation-between="' + whoIsIt + '"></div>'); 
 
    } 
 
});

.private-chat { 
 
    height: 20px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
<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> 
 
<div id="messageBox"></div>