将 javascript onclick 事件附加到锚标记答案

【问题标题】：Appending the javascript onclick event to anchor tag将 javascript onclick 事件附加到锚标记
【发布时间】：2017-07-12 06:26:30
【问题描述】：

我正在尝试将 onclick 事件附加到我的 Phonegap 应用程序。它将链接到外部浏览器的位置。

我的代码：

pair +='<div class="card_background" style="background-image: url("http://placehold.it/600x200");" valign="bottom" class="card-header color-white no-border"><div class="card_overlay"></div><div class="animated_background"></div><h3 class="card-title">'+ results.rows.item(i).title +'</h3></div><div class="card-content"><div class="card-content-inner"><p class="color-gray event_details">Event Location:  <strong>'+ results.rows.item(i).eventlocation +'</strong></p><p class="color-gray event_details">Event Date: <strong>'+ date + " " + month + " " + year +'</strong></p><a href="#" onclick="window.open("'+ results.rows.item(i).eventOrganiserLink +'", _system, location=yes);">Google</a><br/></div></div>';

内循环，后来我把它附加到 div

我正在尝试添加：

<a href="#" onclick="window.open("'+ results.rows.item(i).eventOrganiserLink +'", _system, location=yes);">Google</a>

它给了我错误

提前感谢

【问题讨论】：

看看你的引号的打开和关闭：“和'。这个onclick="window.open("...将在.open(之后关闭onclick属性。你的其余代码不会在onclick中结束属性
@Meldon 我怎么能解决这个我不明白。请问你能帮我重写吗

标签： javascript android jquery phonegap

【解决方案1】：

我已经稍微简化了您的代码。考虑以下几点：

var pair = '';
var eventOrganiserLink = '[EVENT ORGANISER LINK]';

pair += '<a href="#" onclick="window.open("'+ eventOrganiserLink +'", _system, location=yes);">Google</a>';

这将生成以下内容：

<a href="#" onclick="window.open("[EVENT ORGANISER LINK]", _system, location=yes);">Google</a>

onclick 属性以双引号 (") 开头，这意味着它将查找之后的第一个双引号以将其关闭。就在 window.open( 之后，这意味着该部分是唯一将设置为onclick 属性。看看 StackOverflow 代码框中的 onclick 属性中的颜色如何不完全匹配？

这有点棘手，因为我们混合了引号（设置 pair 变量）和双引号（作为该变量中的文本，稍后将用作 html - 所以它必须是有效的）。

您可以对第一个 window.open 参数使用单引号，并在赋值给您的 pair 变量时将它们转义，如下所示：

var pair = '';
var eventOrganiserLink = '[EVENT ORGANISER LINK]';

pair += '<a href="#" onclick="window.open(\''+ eventOrganiserLink +'\', _system, location=yes);">Google</a>';

这将产生：

<a href="#" onclick="window.open('[EVENT ORGANISER LINK]', _system, location=yes);">Google</a>

注意[EVENT ORGANISER LINK] 周围的单引号。还要注意颜色现在匹配了。

【讨论】：

感谢您的帮助，非常感谢。