带有 Jquery mobile 的 SVG 中的链接不起作用答案

【问题标题】：Links in SVG with Jquery mobile not working带有 Jquery mobile 的 SVG 中的链接不起作用
【发布时间】：2015-09-30 02:38:48
【问题描述】：

我正在使用 jQuery 和 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>

【问题讨论】：

标签： jquery jquery-mobile svg

【解决方案1】：

我也遇到了这个问题。如前所述，一个 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 的部分原因，它只加载一些较大的资产一次。

【讨论】：