javascript - 避免内联 javascript

Question

我的代码基本上是这样的:

<a href="javascript:void(0);" onClick="viewServices(1)">Services</a>
<a href="javascript:void(0);" onClick="viewServices(43)">Services</a>
<a href="javascript:void(0);" onClick="viewServices(16)">Services</a>
...

哪里查看服务:

function viewServices(stylistID){
    alert(stylistID);
}

只是，有两个问题:

1. 我正在使用内联 Javascript，但不鼓励这样做。
2. 当我点击一个链接时，函数没有被调用。

还应该提到的是，我正在导入 JQuery 和 Bootstraps .js 文件，并且每个链接(以及关联的 ID)都是动态加载的。

是否有既定的方法可以让我删除我的内联 javascript，但也可以调用将动态加载链接的“ID”传递给函数的函数？

** 编辑

每个链接都是在 mysqli_fetch_row 期间生成的，它会重复，直到每一行的信息都已运行完毕。 viewServices(#)中的数字其实是

<?php echo $row[0]; ?>

Answer 1

一个解决方案是像这样利用数据属性和类来重构html

<a href="#" data-service="16" class="service-link">Services</a>

然后，jQuery

$('.service-link').on('click', function(e){
  e.preventDefault(); // Stop default behavior of clicking link
  alert(this.data('service')); // Retrieve the service id and use it
});