我在ASP.NET的c#代码后面动态创建一个超链接。我需要在客户端点击时调用JavaScript函数。我该如何做到这一点?
答案 0 :(得分:122)
Neater,而不是typical href="#"
或href="javascript:void"
或href="whatever"
,我认为这更有意义:
var el = document.getElementById('foo');
el.onclick = showFoo;
function showFoo() {
alert('I am foo!');
return false;
}
<a href="no-javascript.html" title="Get some foo!" id="foo">Show me some foo</a>
如果Javascript失败,会有一些反馈。此外,消除了不稳定的行为(在href="#"
的情况下跳页,在href=""
的情况下访问同一页面)。
答案 1 :(得分:50)
最简单的答案是......
<a href="javascript:alert('You clicked!')">My link</a>
或者回答调用javascript函数的问题:
<script type="text/javascript">
function myFunction(myMessage) {
alert(myMessage);
}
</script>
<a href="javascript:myFunction('You clicked!')">My link</a>
答案 2 :(得分:25)
使用onclick参数...
<a href='http://www.google.com' onclick='myJavaScriptFunction();'>mylink</a>
答案 3 :(得分:12)
JQuery回答。由于JavaScript是为了开发JQuery而发明的,所以我在JQuery中给你一个例子:
<div class="menu">
<a href="http://example.org">Example</a>
<a href="http://foobar.com">Foobar.com</a>
</div>
<script>
jQuery( 'div.menu a' )
.click(function() {
do_the_click( this.href );
return false;
});
// play the funky music white boy
function do_the_click( url )
{
alert( url );
}
</script>
答案 4 :(得分:4)
我更喜欢使用onclick方法而不是href用于javascript超链接。并始终使用警报来确定您拥有的价值。
<a href='#' onclick='jsFunction();alert('it works!');'>Link</a>
它也可用于输入标签,例如。
<input type='button' value='Submit' onclick='jsFunction();alert('it works!');'>
答案 5 :(得分:3)
理想情况下,我会避免在您的代码中完全生成链接,因为每次您想要对每个链接的“标记”进行更改时,您的代码都需要重新编译。如果你必须这样做,我不会在你的HTML中嵌入你的javascript'调用',这完全是一个坏习惯,你的标记应该描述你的文档不是它的作用,这就是你的javascript的工作。
使用一种方法,其中每个元素(或类,如果它的常用功能)具有特定的id,然后使用Progressive Enhancement添加事件处理程序,如:
[c# example only probably not the way you're writing out your js]
Response.Write("<a href=\"/link/for/javascriptDisabled/Browsers.aspx\" id=\"uxAncMyLink\">My Link</a>");
[Javascript]
document.getElementById('uxAncMyLink').onclick = function(e){
// do some stuff here
return false;
}
这样,对于已禁用JS的用户,您的代码不会中断,并且会明确分离关注点。
希望有用。
答案 6 :(得分:2)
我通常建议使用element.attachEvent(IE)或element.addEventListener(其他浏览器)而不是直接设置onclick事件,因为后者将替换该元素的任何现有事件处理程序。
attachEvent / addEventListening允许创建多个事件处理程序。
答案 7 :(得分:1)
onclick
事件处理程序捕获a 单击用户鼠标中的事件 关于元素的按钮onclick
属性已应用。这个 动作通常会导致调用a 脚本方法,如JavaScript 功能[...]
答案 8 :(得分:0)
如果您不等待加载页面,则无法按ID选择元素。此解决方案适用于任何无法获取代码执行的人
<script type="text/javascript">
window.onload = function() {
document.getElementById("delete").onclick = function() {myFunction()};
function myFunction() {
//your code goes here
alert('Alert message here');
}
};
</script>
<a href='#' id='delete'>Delete Document</a>