HTML锚点标签的onclick没有生效。

Question

HTML锚点标签的onclick没有生效。

3

我正在动态生成一个表格。在td数据内，有一个超链接，应该调用一个函数。为什么下面的代码片段不起作用。当我点击链接时没有任何反应。

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

- Afju

我的代码片段类似于：var td ="< a href='#' onclick='function(){alert('hiii');}' >"; - Afju

9个回答

4

出于安全原因，通过innerHTML添加的事件处理程序在某些情况下不会触发。此外，包含function()是不正确的，因为所有这个onclick将做的就是定义一个匿名函数而已，什么也不会发生。您还有引号冲突。

如果您正在使用jQuery，则事件委托会使此过程更简单。完全排除onclick并使用类似以下内容：

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

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

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

- Explosion Pills

3

第一个问题

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

这段代码使用引号的方式有误，应该采用以下正确方式之一：

正确使用引号

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

或者

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

这只是关于语法的部分。但实际上，在运行时调用函数还需要做一些事情。如果没有正确的调用，函数将不会被执行。这是第二个问题。

第二个问题

现在有两种语法可以在运行时实际执行函数。

第一种语法：

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

因此代码应该是-

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

演示1

第二种语法

new function(){...};

所以代码应该是 -

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

Fiddle demo2

- Rajesh Paul

1

你正在定义一个函数...并没有调用它。

- Kevin Seifert

0

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

试试这个，它可以在没有任何问题的情况下工作，不需要事件监听器

- kishore kingmaker

不要忘记为代码行添加4个空格的缩进。更好的方法是：选择所有代码，然后执行CMD + K。（我已经做过了） - Eric Aya

0

试试这个：

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

- Anshu Dwibhashi

0

不应使用onclick="function(){alert('hiii');}"。您可以尝试以下代码：

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

- Anil Meena

感谢您的评论。我现在已经更新了引用。 - Anil Meena

0

也许这对某些人有所帮助，起初我认为这是由于 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>

};

- Eben Combrinck

0

虽然这是一个引用问题，但以下方法可以解决您的问题。

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

如果你和我一样在使用Vue.js，那么onclick将无法工作。你可以使用这个。

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

- srijan439

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- markasoftware · Accepted Answer

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

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

应该可以这样做。在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>