jquery - 为什么我的点击事件只发生一次？

Question

我有一个列表元素，其中包含下拉菜单下拉引导 div。默认情况下，在此列表元素上单击（markAllMessagesAsSeenHandle() 方法）时会显示下拉菜单，但除了我想在我的列表元素上有一个单击事件。当我第一次单击列表元素时，页面初始加载后，单击事件正在发生。但在那之后，当我再次单击时，我在控制台和 markAllMessagesAsSeenHandler 中看不到任何内容。这是为什么 ？

<div class="wrapper">
<li class="nav-item dropdown" (click)="markAllMessagesAsSeenHandler()">
  <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false">
    <svg role="img" class="dropdown-image">
      <image width="24" height="24" xlink:href="assets/img/notification.svg" />
    </svg>
    <div class="notification-icon">
      <span class="" [ngClass]= "(userService.user.unseen_notifications_no != 0) ? 'notification-icon__number-positive' : 'notification-icon__number-negative'">{{ userService.user.unseen_notifications_no }}</span>
    </div>
    <span class="up-icon">&#8963;</span>
  </a>
  <div class="dropdown-menu dropup" aria-labelledby="navbarDropdownMenuLink">
    <a class="dropdown-item" *ngFor="let message of messages">
      <div class="notification">
        <div class="notification__message"> {{ message.notification }} </div>
        <div class="notification__details">
         <button class="notification__details-info redirect-button" (click)="redirectTo(message)">Action</button>
         <p class="notification__details-info" data-toggle="tooltip" data-placement="bottom" [title]="message.created_at | date:'medium'">{{ moment(message.created_at).fromNow() }}</p>
        </div>
      </div>
    </a>
    <div *ngIf="messages && messages.length == 0" class="zero-notifications">You don't have any notifications</div>
    <button *ngIf="messages && messages.length != 0" class="dropdown-menu__get-more primary" (click)="getMoreNotificationsHandler()">Get More</button>
  </div>
</li>
</div>

// Method
markAllMessagesAsSeenHandler() {
console.log("test");
}

标签： jqueryangularbootstrap-4