html 锚标记的 onclick 不起作用

Question

我正在动态生成一个表。 在 td data 里面，有一个超链接。inturn 它应该调用一个函数。 为什么下面的代码片段不起作用。 当我点击链接时什么也没有发生。

  <a href='#' onclick='function(){alert('hiii');}'>

Answer 1

这是因为冲突的'和函数定义而不是调用（感谢@user1389596）：

<a href='#' onclick="alert('hiii')">

那应该工作。 额外的' S的内部的onclick所做的浏览器视图它作为onclick属性，这是不是你想要的结束。 这样，使用两种不同类型的引号，效果很好。

或者，更好的是，不要使用内联处理程序：

<a href='#' id="thethingy">
<!--in a galaxy far, far away:-->
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function(){
        document.getElementById('thethingy').addEventListener('click',function(){
            alert('hiii');
        },false);
    },false);
</script>

Answer 2

出于安全原因，通过innerHTML添加的事件处理程序在某些情况下不会触发。 包含function ()也是不正确的，因为onclick所做的只是定义一个匿名函数onclick做其他任何事情。 您也有相互矛盾的报价。

如果您使用 jQuery，事件委托会使这更简单。 完全排除onclick并使用以下内容：

$(document).on("click", "a", function () { alert("hiii"); });

document和a选择器应该尽可能具体。

您还可以根据需要将事件绑定到添加到 DOM 的元素。

Answer 3

第一期

onclick='function(){alert('hiii');}'

根据引号的使用，这严重被错误地编码。 正确的用法应该是以下任何一种

正确使用引号

onclick='function(){alert("hiii");}'

或

onclick="function(){alert('hiii');}"

这仅与语法有关。 但是仍然需要做一些事情才能在运行时实际调用该函数。 如果没有适当的调用，该函数将不会被执行。 那是第二个问题。

第二期

现在，您可以遵循 2 种语法在运行时实际执行该函数。

第一种语法：

(function(){...})();

所以代码应该是-

onclick="(function(){alert('hiii');})();"

小提琴演示1

第二种语法

new function(){...};

所以代码应该是-

onclick="new function(){alert('hiii');};"

小提琴演示2

Answer 4

您正在定义一个函数……而不是调用它。

Answer 5

试试这个：

 <a href="javascript:alert('hi');">

Answer 6

你不应该使用onclick="function(){alert('hiii');}" 。 你可以试试这个代码：

<a href="#" onclick="alert('hiii');">

Answer 7

<a onclick='function(){alert('hiii');}' href='#' >

试试这个它会毫无问题地工作，不需要事件监听器

Answer 8

虽然这是一个引号问题。 以下将解决您的问题。

<a href='#' onclick="alert('hiii')">

如果您像我一样使用 Vue.js，则 onclick 将不起作用。 你可以用这个。

<a href="javascript:void(0);" @click="alert('hiii')">

Answer 9

也许这可以对某人有所帮助，起初我认为这是由于存在 href 并在 onclick 事件之前插入的事实。

但是，这里是一个调用函数并传递参数的 a 标记示例。

两个示例都具有不同顺序的 onclick 事件和 href 属性。

 function helloWorld(message){ alert('Hello world! : ' + message); };

 <a href='#' onclick="helloWorld('href before onclick')">Click Me (href then onclick)</a> <br> <br> <a onclick="helloWorld('onclick before href')" href="#">Click Me (onclick then href)</a>

};