click event for list group not triggering when clicked

Question

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> 

Answer 1

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) {

Answer 2

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

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

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

Answer 3

Demo : http://jsfiddle.net/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");
});