Why Tag Is Not Accept Data-id Attribute? O'clock Event Cannot Get Id

You will see in the below, my 'li' tags are not accept and display data-id attribute. Because of that, my click event does not get id and cannot pass the id to action. I added 1 an

Solution 1:

Try this, data-id set as an attribute, and .data('id') is used to get the data of element.

  $(document).on('click', 'ul.notifications li.notification-text', function (e) {
        var target = e.target;
       var id = $(target).attr('data-id');
        console.log(id);
    });

Solution 2:

I think the culprit must be found elsewhere. [li].data("id") works like expected. A minimal reproducable example:

$(`ul`).append(`
  <li class='list-group-item notification-text' data-id="someId123">
    Some Text
  </li>`);
  
console.log($(`ul li`).data(`id`));
//                     ^ works

[data-id]:after {
  content: ' (my data-id is 'attr(data-id)')';
  font-weight: bold;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul></ul>