html 锚标记的 onclick 不起作用

Question

I was generating a table dynamically. Inside the td data , there is a hyperlink.inturn it should call a function. why the below code snippet was not working. Nothing happening when i click on the link.

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

Answer 1

It's because of conflicting ' and a funciton definition instead of call (thanks @user1389596):

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

that should work. The extra ' s inside of the onclick made the browser view it as the end of the onclick attribute, which isn't what you want. This way, using two different types of quotes, it works fine.

Or, even better, don't use inline handlers:

<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

Event handlers added via innerHTML will not trigger in some cases for security reasons. It's also incorrect to include function () since all this onclick would do is define an anonymous function and do nothing else. You also have conflicting quotes.

If you are using jQuery, event delegation would make this simpler. Exclude onclick entirely and use something like:

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

document and a selectors should be as specific as possible.

You can also bind events to elements added to the DOM as needed.

Answer 3

1st Issue

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

This seriously is wrongly coded as per the use of quotes . The proper usage should be any of the following

Proper use of quotes

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

or

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

This much only about the syntax. But there is still something to be done to actually call the function at runtime. Without proper invocation the function will not be executed. That is the 2nd issue.

2nd Issue

Now there are 2 syntax that you may follow to actually execute the function at runtime.

1st syntax:

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

So the code should be-

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

Fiddle Demo1

2nd syntax

new function(){...};

So the code should be-

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

Fiddle demo2

Answer 4

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

Answer 5

试试这个：

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

Answer 6

You should not use onclick="function(){alert('hiii');}" . You may try this code:

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

Answer 7

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

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

Answer 8

Although this a quotes problem. Following will solve your problem.

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

In case you are using Vue.js like me onclick will not work. You can use this.

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

Answer 9

Maybe this can be of help to someone, At first I thought it was due to the fact that href was present, and inserted before the onclick event.

However here is a sample of an a tag that calls a function and passing a parameter.

Both Samples has the onclick event and href properties in different orders.

 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>

};