在下面的简化代码中，href 链接到自定义 javascript 函数 (MyFunction)。当单击链接(“链接文本”)时，什么也没有发生(虽然我期待一条警告消息“Hello world”)并且控制台显示错误“Uncaught SyntaxError: Unexpected token !”在文件的开头，我(也)不明白。
只是想知道下面的代码有什么问题(？)
<script type="text/javascript">
function MyFunction(message){
alert(message);
}
$(document).ready(function(){
var message="Hello world";
$('#myDiv').html('<a id="myLink" href="#" onclick="MyFunction('+message+');">link text</a>'); //looked at the example solution at http://stackoverflow.com/questions/1070760/javascript-function-in-href-vs-onclick
}); //$(document).ready
</script>
</head>
<body>
<div id="myDiv"> </div>
</body>
</html>
最佳答案
用于创建 a 标记的字符串将评估为:
<a id="myLink" href="#" onclick="MyFunction(Hello world);">link text</a>
所以会抛出异常。可以像很多人说的那样引用参数:
onclick="MyFunction(\'' + message + '\');" // onclick="MyFunction('Hello World!');"
或者你可以用正确的方式来做:
$('#myDiv').append('<a id="myLink" href="#">link text</a>').on('click', 'a', function(e)
{
alert(message);
});
在这种情况下，message 必须在全局范围内声明才能工作。 Fiddle .
更新:现在，为什么我认为第二个更好:
html()方法考虑以下参数:
A string of HTML to set as the content of each matched element.
还有 append()方法接受作为第一个参数:
DOM element, array of elements, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.
因此您可以看到 append() 将 DOM 元素/树附加到元素，而 html() 仅考虑一个字符串，例如用于纯 JavaScript 的 innerHTML。您只是不使用 innerHTML 向元素添加元素，您必须创建它们，这就是 append() 所做的。
然后，由于元素现在添加 到 dom 树中，您可以使用 on() 设置它的事件。替换 HTML 标记上的内联事件。参见 here或 here为什么。
关于javascript - 链接到 javascript 函数的 href 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22234507/