避免使用内联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>
...

viewServices的位置:

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
});