我的聊天室代码包含以下部分:
的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');
});
});
问题是当我选择多个列表组项目然后单击“发送”按钮时,
alert(selected_group_id);
打印我选择的所有项目的ID。我只想选择sendChatMessage(selected_group_id);
中最后使用的项目。如果有人指出哪里出了问题,那就太好了。谢谢。编辑。
主要问题是当我点击发送时,消息一式两份地发送(发送之前我选择的所有列表组项目ID的数量)。如果我只是选择一个组并发送,则消息不会重复(可以)。
最佳答案
修改了您的HTML和JS代码,并在这里工作。请看看。
$(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>
关于javascript - 为什么在list-group-item的on('click')之后保留先前单击的ID?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38263783/