2

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

<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]; ?>
4

3 回答 3

6

一个解决方案是像这样利用数据属性和类来重构 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
});
于 2013-11-09T03:16:28.153 回答
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它是在闭包中定义的，因此它不是全局的。然后，您必须在该闭包中添加事件侦听器。

于 2013-11-09T03:18:08.023 回答
1

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

javascript 在您页面的 head 部分中吗？如果没有，请尝试。

如果您不想这样做，请确保 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"));
});
于 2013-11-09T03:17:48.740 回答