在超链接中调用 Javascript 方法

Question

在我的 MVC Razor 页面中，我可以在下面的超链接中成功调用 Javascript 方法：

<a id="lnkAddAccount" class="btn btn-default btn-sm" data-toggle="modal" 
    onclick='openModal("#div1", "#div2")'>Details
</a>

然而，当必须在字符串中使用这个超链接时，我遇到了 "SyntaxError: expected expression, got end of script" 错误。

'<a title="Details" class="btn btn-sm btn-outline grey-salsa" 
    onclick=openModal("#div1", "#div2")><i class="fa fa-search"></i></a>'

如何从后面的超链接调用这个Javascript方法？

Answer 1

你需要引号。

'<a title="Details" class="btn btn-sm btn-outline grey-salsa" 
    onclick="openModal(\"#div1\", \"#div2\")"><i class="fa fa-search"></i></a>'

注意必须转义内引号。

总的来说，从字符串中生成 HTML 很麻烦。根据您的技术堆栈，通常有更好的方法。

Answer 2

第一个问题：您删除了 onclick 值周围的引号。 HTML 中的引号是可选的（但强烈推荐）。但是，当值像您的情况一样具有 space 时，引号是必需的。

第二个问题：openModal 的参数有引号。这很好，但是如果您添加引号来解决上面的第一个问题，您最终会在引号内使用引号，在这种情况下，您必须使用 \.

来转义内引号

所以你有两个解决方案：

方案一（不推荐）：去掉onclick值中的space，这样就不需要用引号括起来了:

'<a title="Details" class="btn btn-sm btn-outline grey-salsa" onclick=openModal("#div1","#div2")><i class="fa fa-search"></i></a>'

此解决方案可行，但不推荐使用，因为强烈建议始终在值周围使用引号。

解决方案 2：用引号将值括起来，并用 \:

转义内部引号

'<a title="Details" class="btn btn-sm btn-outline grey-salsa" onclick="openModal(\'#div1\', \'#div2\')"><i class="fa fa-search"></i></a>'

Answer 3

试试这个

'<a title="Details" class="btn btn-sm btn-outline grey-salsa" onclick="openModal(\"#div1\", \"#div2\")"><i class="fa fa-search"></i></a>'

中间不要换行，否则用换行符连接

Calling Javascript method in hyperlink