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

只有，有两个问题：

我使用的是内联Javascript，不鼓励这样做。
单击链接时，不会调用该函数。

还应该提到我正在导入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
});

Answer 2

您可以使用

<a class="viewServices" data-arg="1">Services</a>
<a class="viewServices" data-arg="43">Services</a>
<a class="viewServices" data-arg="16">Services</a>

和

// viewServices is not defined here
(function() { // viewServices is defined inside here
    function viewServices(arg) { /* ... */ }
    function viewServicesCaller() {
        viewServices(this.getAttribute('data-arg'));
    }
    var els = document.getElementsByClassName('viewServices');
    for(var i=els.length-1; i>=0; --i) {
        els[i].onclick = viewServicesCaller;
    }
})();

可能您的代码不起作用，因为viewServices是在闭包内定义的，因此它不是全局的。然后，您必须在该闭包中添加事件侦听器。

Answer 3

您在控制台中遇到了什么错误？

网页顶部的javascript是什么？如果没有，请尝试。

如果您不想这样做，请确保javascript代码位于链接之前。

祝你好运。

对于jQuery，你可以这样做：

<a class="services" data-service="1">Services</a>
<a class="services" data-service="43">Services</a>
<a class="services" data-service="16">Services</a>


$(".services").click(function(link){
  link.preventDefault();
  alert(this.data("service-id"));
});

避免使用内联javascript

3 个答案: