为什么我需要两次单击两次才能使用 angular8 和 jquery 触发 onclick 事件

Question

为什么我需要两次单击才能触发 angular8 和 jquery 的单击事件

//.ts

addActive1() {

$(document).ready(function () {

  $('.arrow').on('click', function () {

    $(this).siblings('.box').toggleClass('active');

    $(this).toggleClass('arrow-clicked');

  });

});

}

//.html

<a (click)="addActive1()" class="arrow shadow-lg">

Answer 1

因此，经过几次搜索，我找到了适合我的完美答案。让我先解释一下我的情况，我有 3 个用于任务、视觉等的框，每个框都有固定的高度，如果我单击箭头展开它们，它们必须适合 100% 的文本。当我将它创建为静态页面时，它运行良好，但是当我使用 ngFor 循环时它不起作用。所以我找到了这个答案$(document).on('click',&nbsp;'.arrow',&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).siblings('.box').toggleClass('active'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).toggleClass('arrow-clicked');&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('Clicked!');});如您所见，问题是我在彼此内部使用了 2 个函数，所以它触发了 2 次，所以我将$('.arrow')切换为$(document)。并且在点击时只使用了 jQuery。