jquery on click event is not working

Question

This is my click event

$('body').on('click', 'ul.notifi', function() {
  var id = $(this).attr("data-id");
  console.log('clicked');
  alert(id);
});

This is how I create those elements with the notifi class

$.each(response['notifResult'], function( index, value ) {
            $('.notifMenu').append('<li><a href="#"><i data-id="' + value['id'] + '" class="' + value['icon'] + ' text-purple notifi"></i> ' + value['notificationText'] + '</a></li>');
          });

This is where they are displayed

<ul class="dropdown-menu">
              <li class="header">You have <span class="notifNumberRep">...</span> notifications</li>
              <li class="header">Click notifications to mark them as readed.</li>
              <li>
                <!-- inner menu: contains the actual data -->
                <ul class="menu notifMenu">

                </ul>
              </li>
              <li class="footer"><a href="#">View all</a></li>
            </ul>

Answer 1

You're missing the class name 'notifi' from the <ul /> to make the jQuery pattern work. See this fiddle for a working example with your code.

https://jsfiddle.net/fng33ogr/1/

<ul class="dropdown-menu">

Should be:

<ul class="dropdown-menu notifi">

Update

Query changed to be ul.notifi a , moved id data attribute to a . See latest fiddle.

Answer 2

Take the ul of your delegated selector - the notifi class is on the i tag:

$('body').on('click', '.notifi', function() {
  var id = $(this).attr("data-id");
  console.log('clicked');
  alert(id);
});

If you are wanting to fire the event on the click of the anchor or li, move the class and data attribute to the corresponding element

For example if you want the li to fire the above event:

$('.notifMenu').append('<li data-id="' + value['id'] + '" class="notifi"><a href="#"><i class="' + value['icon'] + ' text-purple"></i> ' + value['notificationText'] + '</a></li>');

However, I would bind it to your anchor as then you can prevent the default action of the anchor (which is probably going to take you off to another page). Change your event binding to:

$('body').on('click', '.notifi', function(e) {
  e.preventDefault(); // prevent the ddefault action of the anchor so the following will be processed

  var id = $(this).attr("data-id");
  console.log('clicked');
  alert(id);
});


// add data and class to anchor
$.each(response['notifResult'], function(index, value) {
  $('.notifMenu').append('<li><a href="#" data-id="' + value['id'] + '" class="notifi"><i class="' + value['icon'] + ' text-purple "></i> ' + value['notificationText'] + '</a></li>');
});

Answer 3

$('ul').on('click', '.notifi', function() {
  var id = $(this).attr("data-id");
  console.log('clicked');
  alert(id);
});

to be more specific add parent selector as ul and child selector class as ".notify"