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>

};