Angular 6 JQuery 嵌套属性单击事件不起作用

Question

在 jQuery 中添加点击侦听器无效。 HTML 中创建的嵌套属性似乎未被 jQuery 选择以添加侦听器

我已经尝试在 ngOnInit() 中添加一个监听器，但它不起作用。

HTML代码

<ul class="list-unstyled dropdown-content" id="search_dropdown">
  <span *ngFor="let merchant of merchants">
    <li [ngClass]="{ active: isActive(merchant) }">
      <a href="" (click)="selectMerchantFromMenu($event, merchant)">{{merchant.name}}</a>
    </li>
  </span>
</ul>

TypeScript 代码

$(document).ready(() => {
  $("#search_dropdown span li a").on("click", function(e) {
    e.preventDefault();
    alert($(this));
    $("#search_input").val($(this).text());
  });
});

Answer 1

您提供的代码仅在 document.ready 上执行，并且在 angular 启动之前执行一次。将此代码放在 ngOnInit 中会在执行后调用 document.ready，它不会执行任何操作。

将此代码放在 angular 之外可能会导致另一个问题。查询 ($("...")) 执行一次，事件侦听器将应用于找到的元素。但是 document.ready 会在 angular 构建代码之前执行代码，所以它什么也找不到。

我建议您将代码放在 document.ready 之外并使用 .on(events, selector, handler):

ngOnInit() {
  $(document).on("click", "#search_dropdown span li a", function(e) {
    e.preventDefault();
    alert($(this));
    $("#search_input").val($(this).text());
  });
}

但我真的建议你不要将 jquery 与 angular 一起使用。 Angular 拥有您可能需要的一切，无需加载额外的库。

Angular 6 JQuery 嵌套属性单击事件不起作用

Angular 6 JQuery Nested attributes Click event not working

jquery

click

angular6