在超链接中调用 Javascript 方法答案

【问题标题】：Calling Javascript method in hyperlink在超链接中调用 Javascript 方法
【发布时间】：2016-09-08 04:51:39
【问题描述】：

在我的 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方法？

【问题讨论】：

您能发帖作为答案吗？谢谢...
现在是 21 世纪 - 停止用行为污染您的标记，并使用 Unobtrusive JavaScript
@StephenMuecke 嗯，实际上我之前已经多次看到这种方法，我认为切换到它确实是个好主意。但是，我不确定使用它是否有缺点。有没有？另一方面，为了使用这种方法，您能否告知我可以从哪个页面获取有关与标准事件（即 onClick、onLoad 等）对应的所有事件的信息的页面？非常感谢...
jquery events
布局中只需要一个脚本。你可以给你的按钮一个类名，它们的脚本是$('.yourClassName').click(function() { // do something });

【解决方案1】：

第一个问题：您删除了 onclick 值周围的引号。引号在 HTML 中是可选的（但强烈推荐）。但是，当值在您的情况下包含空格时，引号是强制性的。

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

所以你有两个解决方案：

解决方案 1（不推荐）：删除 onclick 值中的空格，这样就不需要用引号括起来了：

'<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>'

【讨论】：

【解决方案2】：

你需要引号。

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

注意必须转义内部引号。

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

【讨论】：

【解决方案3】：

试试这个

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

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

【讨论】：