SVG中的链接与jquery mobile不起作用

我正在使用jQuery和jQuery Mobile来创建一个包含多个元素的地图。这些元素应该代表建筑物或建筑物的一部分。如果你点击它们，你应该到另一个页面或打开一个对话框。SVG中的链接与jquery mobile不起作用

最好的解决方案是将SVG代码放入页面，因为它是可缩放的。现在的问题是路径周围的链接不起作用。它们显示在每个浏览器中，甚至显示目标链接，但它什么也没有发生。如果我评论jquery mobile 1.4.5的嵌入，并且它只适用于jquery！

SVG中的示例路径的代码示例。它显示了一个带有维基百科链接的红色正方形。在jQuery中运行，但不与jQuery Mobile的：

<div data-role="content"> 
 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 525 365" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" id="map" preserveAspectRatio="xMinYMin meet"> 
 
<a xlink:href="//en.wikipedia.org/wiki/Main_Page"> 
 
<path 
 
    style="fill:#ff2700;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke- 
 
    linejoin:miter;stroke-opacity:1;fill-opacity:1" 
 
    d="M 24.243661,19.27897 230.31478,11.197749 222.23356,223.32978 18.182746,235.45161 z" 
 
    id="path3773" 
 
    inkscape:connector-curvature="0" 
 
    transform="translate(216.65625,143.28125)" /> 
 
</a> 
 
</svg> 
 
    </div>

来源

2014-11-24 Hansde Wurst

我遇到了同样的问题。似乎有些jQuery移动小部件（例如面板）在所有<a>标签上注册了点击处理程序。点击处理程序中的代码抛出一个未捕获的类型错误：undefined不是函数当点击SVG内的链接时发生异常。

而不是打击这种行为或修复jQuery手机内的代码，我选择了<embed>的SVG。它完美的作品。

来源

2015-03-24 18:52:05

我刚刚遇到了这个问题。正如前面提到的，一个jQuery Mobile小部件劫持链接。这是目前为止我工作的解决方案：我在任何被劫持的链接（可以是任何元素）上添加一个data-navigate属性，然后为具有该属性的元素上的vclick（https://api.jquerymobile.com/vclick/）事件添加全局侦听器。

HTML

<svg...> 
    <a xlink:href="/somepage.html" data-navigate="/somepage.html"> 
    <rect... /> 
    </a> 
</svg>

$(document).on('vclick', '[data-navigate'], function() { 
    var url = $(this).data('navigate'); 

    // https://api.jquerymobile.com/pagecontainer/#method-change 
    $(':mobile-pagecontainer').pagecontainer('change', url); 
});

更新：这里有一个的jsfiddle：http://jsfiddle.net/1658mafr/

更新＃2：虽然这种方法效果很好，当somepage.html在这个例子中加载所有的资产（JS，CSS）;并且如果您从somepage.html中点击后退按钮，资源将再次加载。我的理解是pagecontainer('change')方法应该与点击链接相同，但显然不是。我正在研究这个问题，并会根据情况进行更新。现在请注意，这个解决方案正在破坏使用JQM的部分原因，JQM只会加载一些较大的资产。

来源

2015-09-28 22:11:11 Jkleg

SVG中的链接与jquery mobile不起作用

回答

相关问题