onclick无法在胸腺上起作用<a> tag enclosed in </a> <li> <a>, it works in </a> <div> <a>

Question

I am trying to build a spring mvc application with thymeleaf. I am using anchor tag inside list when user clicks on anchor tag it should trigger an onclick event but it is not triggering. When I replace list with div it works.

<li class="nav-item">
  <a class="nav-link" href="#" th:text="${hdrObject.hdrName}"></a>
  <ul class="mb-sub-menu-list" th:if="${hdrObject.hdrName} == 'STANDARDS'">
      <li class="mb-sub-menu-list-item" th:each="subhdrObject : ${hdrObject.subhdrObjects}">
          <a href="#" class="sub-menu-list-item-active" th:text="${subhdrObject.subHdrName}" th:onclick="'javascript:hdrsubhdeonclick('+ ${hdrObject.hdrId} +', '+ ${subhdrObject.subHdrId} +')'"></a>
      </li>
  </ul>
</li>

function hdrsubhdeonclick(hdrId, subHdrId) {
    console.log(hdrId,"hdId::2");
    alert("Hello");
}