Question

在下面的简化代码中，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>

Answer 1

创建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()方法考虑以下参数：

要设置为每个匹配元素内容的HTML字符串。

append()方法接受第一个参数：

要在匹配元素集中的每个元素末尾插入的DOM元素，元素数组，HTML字符串或jQuery对象。

因此，您可以看到append()认为要将追加的DOM元素/树添加到元素中，而html()仅考虑字符串，例如innerHTML纯JavaScript。您只是不向innerHTML元素添加元素，您必须创建它们，这就是append()所做的。

然后，当元素现在添加到dom树时，您可以使用on()设置它的事件，替换HTML标记上的内联事件。请参阅here或here原因。

Answer 2

应引用字符串文字，即使在引用的代码中也是如此。问题是你需要引用太多：字符串文字（1）在字符串内的属性（2）内有HTML（3）。

如此深层次的嵌套会产生不同的问题。我昨天在字面上面对他们。我没有完成确切的测试用例，但似乎即使使用"也会导致Chrome出现错误。

因此我建议一个解决方法：在属性中添加一条消息：

$('#myDiv').html(
     '<a id="myLink" href="#" ' +
     'data-message="' + message.replace(/"/g, "&quot;") + '"' + 
     'onclick="MyFunction(this.getAttribute(\'data-message\'));">' +
     'link text</a>'
);

@DontVoteMeDown的解决方案甚至更好，不仅因为它从完全不同的方向“攻击”问题，而且无需转义/引用。

我的技术很有用，即使通过DOM level 2 / jQuery附加事件处理程序，也需要为不同的元素设置不同的上下文。

Answer 3

引用参数：

onclick="MyFunction('"+message+"');

否则它会查找包含message

文本的变量

Answer 4

您同时遇到两个单独的引用问题。目前您的代码将输出：

<a id="myLink" href="#" onclick="MyFunction(Hello world);">link text</a>

哪个不正确，因为JavaScript会尝试将Hello world解释为对象（注意它没有引号）：

MyFunction(Hello world);

因此，您需要用引号括起来。但是，如果您尝试：

'<a id="myLink" href="#" onclick="MyFunction("'+message+'");">link text</a>'

然后生成的标记将不可解析：

<a id="myLink" href="#" onclick="MyFunction("Hello world");">link text</a>

因为双引号会混淆它。它会尝试在第一个括号处结束onclick属性，然后遇到意外的Hello令牌。

（注意Stack Overflow上的语法突出显示了两个示例中的问题。）

因此，您还需要使用单引号，并且为了在已经单引号字符串中执行此操作，您需要转义它们：

'<a id="myLink" href="#" onclick="MyFunction(\''+message+'\');">link text</a>'

href链接到javascript函数无法正常工作

4 个答案: