在JavaScript中为移动浏览器添加链接
我试图寻找我的问题,但找不到解决办法。抱歉,如果这已经发布了 我有一个使用append动态创建的href链接,但除了ipad,它在mobile Safari和mobile Chrome上不起作用。该链接在我测试过的所有桌面浏览器上都能正常工作,或者如果我选择移动设备上的请求桌面站点。这就是我正在做的: 我正在使用append创建一些元素,其中一个包含我的链接。这些信息只是从json数组中获取的 HTML: 但这段代码也失败了,尽管我看到它是在我的日志中执行的,在移动浏览器以外的任何地方都可以使用。但是,如果我删除了append并简单地使用html结构,那么这些链接就可以在手机上使用了。。。这告诉我问题可能出在append上 我的问题是:在移动浏览器上使用append和append时,添加链接href的正确方式是什么在JavaScript中为移动浏览器添加链接,javascript,jquery,html,css,dom,Javascript,Jquery,Html,Css,Dom,我试图寻找我的问题,但找不到解决办法。抱歉,如果这已经发布了 我有一个使用append动态创建的href链接,但除了ipad,它在mobile Safari和mobile Chrome上不起作用。该链接在我测试过的所有桌面浏览器上都能正常工作,或者如果我选择移动设备上的请求桌面站点。这就是我正在做的: 我正在使用append创建一些元素,其中一个包含我的链接。这些信息只是从json数组中获取的 HTML: 但这段代码也失败了,尽管我看到它是在我的日志中执行的,在移动浏览器以外的任何地方都可以使用
谢谢大家! 请尝试以下代码,因为您在不需要时有一些奇怪的转义字符,并且您没有在URL中编码q参数,并且没有使用正确的选择器结构:
编辑:没有看到一年前提出的问题=_= 一直以来,我都喜欢一次创建一个单独的HTML元素并将它们附加到DOM中。。。我想知道你是否去掉了用来转义双引号和新行的反斜杠?如果你得到更稳定的代码,试着单独创建元素?结构变量是什么?您是否能够从chrome或safari中捕获控制台输出?你能用js修改一下示例代码吗。代码看起来不错,你不需要。append$你可以直接使用。append'当你说它不工作时,你的意思是链接没有出现,链接不能点击,还是链接没有到达正确的位置?
<ul id="structure"></ul>
function createStructure(i){
$(structure).append($('<ul> \
<li data-type="media" data-url=\"' + properties[i].image + '\"data-target="_blank"></li> \
<li data-thumbnail-path=\"' + properties[i].thumbnail + '\"></li> \
<li data-info=""> \
<p class="mediaDescriptionText">Link to map: <a class="gmaplink" target="_blank" rel="external" href="http://www.maps.google.com/?q=' + properties[i].Address +'">Click Here</a>.</p> \
</li></ul>'));
}
$(document).on('click', '.gmaplink', function(){
console.log("link working: " + this.href);
window.open(this.href, '_blank');
});
function createStructure(i){
$('#structure').append($('<ul>' +
'<li data-type="media" data-url="' + properties[i].image + '" data-target="_blank"></li>' +
'<li data-thumbnail-path="' + properties[i].thumbnail + '"></li>' +
'<li data-info="">' +
'<p class="mediaDescriptionText">Link to map: <a class="gmaplink" target="_blank" rel="external" href="http://www.maps.google.com/?q=' + encodeURIComponent(properties[i].Address) +'">Click Here</a>.</p>' +
'</li>'+
'</ul>'));
}