为什么 JS Click 事件绑定到 HTML 元素并不总是如此

问：

我有有趣的麻烦，无法理解其中的原因。
共同点是 Angular 15 项目。
我有 4 个 Html 元素，所有这些元素都可以在浏览器中成功定义。

 $('#openmodal') {..., lenght=1}
 $('#openmodal1') {..., lenght=1}
 $('#openmodal2') {..., lenght=1}

并且我为每个事件附加了完全相同的 Click 事件。

ngOnInit(): void {
  var modal = UIkit.modal("#loginmodal");
  $('#openmodal').on('click', function() {
    modal.toggle();
  });
  $('#openmodal1').on('click', function() {
    modal.toggle();
  });
  $('#openmodal2').on('click', function() {
   modal.toggle();
  });
}

但最后，一些 Html 元素附加了 Click 事件，但另一个 Html 元素没有附加事件。

这个问题的可能原因是什么？