I'm new to JQuery so maybe my syntax isn't correct but I can't trigger any click event for a bootstrap list group, when I select something from the list. I don't know if it makes a difference but the list group is inside a bootstrap popover.

I have tried both methods here.

$('#eventList').on('click', '.list-group-item', function(e) {
  e.preventDefault();
  //code here
});

$(".list-group-item").click(function() {
  // code here
});

<div id="events-popover-head" class="hide">Events</div>
<div id="events-popover-content" class="hide">
  <ul id="eventList" class="list-group">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>
</div>

I'm new to JQuery so maybe my syntax isn't correct but I can't trigger any click event for a bootstrap list group, when I select something from the list. I don't know if it makes a difference but the list group is inside a bootstrap popover.

I have tried both methods here.

$('#eventList').on('click', '.list-group-item', function(e) {
  e.preventDefault();
  //code here
});

$(".list-group-item").click(function() {
  // code here
});

<div id="events-popover-head" class="hide">Events</div>
<div id="events-popover-content" class="hide">
  <ul id="eventList" class="list-group">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>
</div>

• javascript
• jquery
• twitter-bootstrap
• popover

• this code is working for me – Shelly Commented Apr 15, 2015 at 0:30

3 Answers 3

That code is correct and works fine.

It's not working in your case because '#eventList' doesn't exist at the time you're adding the listener.

Try this

$(document).on('click', '#eventList .list-group-item', function(e) {

Your code is working 100% fine here https://jsfiddle/bkf7y6q7/

Are you sure you included the following in your html file:

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

Demo : http://jsfiddle/du92ucfm/1/

This is working , is there anything else you are asking ? can you provide a specific code related to bootstrap.js

$('#eventList').on('click', '.list-group-item', function(e) {
  console.log('i am clicked 1');
});
$(".list-group-item").click(function() {
 console.log("i am clicked 2");
});