javascript - 在 JavaScript 中为移动浏览器附加链接

Question

我尝试搜索我的问题，但找不到解决方案。抱歉，如果这已经发布。

我有一个使用追加动态创建的 href 链接，但它不适用于移动版 Safari 和移动版 Chrome(ipad 除外)。该链接在我测试过的所有桌面浏览器上都可以正常工作，或者如果我在移动设备上选择“请求桌面站点”。这就是我正在做的:

我正在使用 append 创建一些元素，其中之一包含我的链接。该信息仅取自 json 数组。

HTML:

<ul id="structure"></ul>    

Javascript:

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>'));  
}

该链接指向谷歌地图，但它不适用于 Safari 和 Chrome(在移动设备上)的移动版本。我还尝试添加一个 .on() 以确保检测到点击事件:

$(document).on('click', '.gmaplink', function(){
    console.log("link working: " + this.href);
    window.open(this.href, '_blank');
});

但是这段代码也失败了，即使我看到它是通过我的日志执行的(除了移动浏览器之外的任何地方都可以运行)。但是，如果我删除附加内容并仅使用 html 结构，则链接可以在移动设备上使用...所以这告诉我问题可能出在附加内容上。

我的问题是:在移动浏览器上使用追加时，包含链接 (href) 的正确方法是什么。

谢谢!

Answer 1

试试下面的代码，因为你在不需要的时候有一些奇怪的转义字符，而且你没有对 URL 中的 q 参数进行编码，也没有使用正确的选择器 #结构 :

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

}

编辑:没看到问题是一年前问的...=_=