Ammly Ammly - 5 months ago 12
jQuery Question

Why does this retain previously clicked ids after on('click') on a list-group-item?

I have the following part of my chatroom code:

HTML

<div class="list-group">
<a class="list-group-item" id="1" href="#">Group A</a>
<a class="list-group-item" id="2" href="#">Group B</a>
<a class="list-group-item" id="3" href="#">Group C</a>
<a class="list-group-item" id="4" href="#">Group D</a>
</div>

<div class="message_box">
<form action="#" class="form">
<div class="form-group"></div>
<div class="input-group">
<textarea class="form-control message_text emojiable-message"
name="message_text" id="message_text" rows="3"></textarea>
<span class="input-group-addon btn btn-primary send_message_btn" name="send_message_btn"
>
Send
</span>
</div>
</form>
</div>


jQuery

$(document).ready(function () {
$('#groups a.list-group-item').on('click', function () {
$(this).toggleClass("active");
$(this).siblings().removeClass("active");

//chage the textarea and btn id to single user.
$('.send_message_btn').removeAttr('id');
$('.send_message_btn').attr('id', 'send_to_topic');

var selected_group_id = this.id;

//Handle enter key press and mouse click (group)
$('#send_to_topic').click(function(e) {

alert(selected_group_id);

//sendChatMessage(selected_group_id);
return false;
});

$('#message_text').keydown(function(e) {
if (e.keyCode == 13) {

alert(selected_group_id);

//sendChatMessage(selected_group_id);
return false;
}
});

$(this).removeClass('active');
$(this).removeAttr('id');
});
});


The problem is when I select several list-group-item and then hit send button, the
alert(selected_group_id);
prints the ids of all the items I had selected. I just want to pick the last selected item to use in
sendChatMessage(selected_group_id);
. If someone could point out where am going wrong that would be great. Thanks.


Edit.
The main problem is when I hit send the message gets delivered in duplicates (number of all list-group-item ids I had selected before sending). If I just select one group and send the message does not duplicate (which is okay.).

Answer

Modified your HTML and JS code a bit and its working here. Please have a look at it.

$(document).ready(function() {
  $('a.list-group-item').on('click', function() {
    $(this).toggleClass("active");
    $(this).siblings().removeClass("active");
  });

  //Handle enter key press and mouse click (group)
  $('#send_to_topic').click(function(e) {

    var selected_group_id = $(".list-group .active").attr("id");
    alert(selected_group_id);

    return false;
  });

  $('#message_text').keydown(function(e) {
    if (e.keyCode == 13) {
      var selected_group_id = $(".list-group .active").attr("id");
      alert(selected_group_id);

      //sendChatMessage(selected_group_id);
      return false;
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="list-group">
  <a class="list-group-item" id="1" href="#">Group A</a>
  <a class="list-group-item" id="2" href="#">Group B</a>
  <a class="list-group-item" id="3" href="#">Group C</a>
  <a class="list-group-item" id="4" href="#">Group D</a>
</div>

<div class="message_box">
  <form action="#" class="form">
    <div class="form-group"></div>
    <div class="input-group">
      <textarea class="form-control message_text emojiable-message" name="message_text" id="message_text" rows="3"></textarea>
      <span class="input-group-addon btn btn-primary send_message_btn" name="send_message_btn" id="send_to_topic">
        Send
      </span>
    </div>
  </form>
</div>