爲什麼在列表組項目上點擊（'點擊'）後，這會保留先前點擊的ID？

Question

我有我的聊天室代碼以下部分：

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);中使用。如果有人能指出哪裏出了問題，那很好。謝謝。

編輯。 主要問題是當我點擊發送消息獲得重複發送（發送之前我選擇的所有list-group-item ID的數量）。如果我只選擇一個組併發送消息不重複（這沒關係）。

Answer 1

修改你的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>

Answer 2

由於vijayP建議，您$('#send_to_topic').click()和$('#message_text').keydown()應該住$('#groups a.list-group-item').click()事件之外。

接下來，由於您的selected_group_id變量是使用var關鍵字聲明的，因此$('#groups a.list-group-item').click()範圍之外的函數無法訪問它。 所以，你應該聲明此變量的所有這些活動之外，像這樣：

jQuery的

$(document).ready(function() { 

    // Declare the selected_group_id outside of the events so they can access to it 
    var selected_group_id; 

    $('#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'); 

     selected_group_id = this.id; 

     $(this).removeClass('active'); 
     $(this).removeAttr('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; 
     } 
    }); 
});