带有Jquery mobile的SVG中的链接不工作

我正在使用jQuery和jQuery Mobile创建一个包含多个元素的地图。这些元素应代表建筑物或建筑物的一部分。如果你点击它们，你会进入另一个页面或者打开一个对话框

最好的解决方案是将SVG代码放入页面中，因为它是可伸缩的。现在的问题是路径周围的链接不起作用。它们在每个浏览器中都会显示，甚至目标链接也会显示，但它什么也不会发生。如果我把jquerymobile1.4.5的嵌入注释掉，它只适用于jquery

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

---

我遇到了同样的问题。它看起来像一些jQuery移动小部件，例如面板，在所有标签上注册一个点击处理程序。单击处理程序中的代码抛出一个未捕获的TypeError：单击SVG中的链接时，undefined不是函数异常

---

我选择了SVG，而不是对抗这种行为或修复jQuery mobile内部的代码。它工作得很好。

我也遇到了这个问题。如前所述，jQuery移动小部件正在劫持链接。这是目前为止对我有效的解决方案：我在任何链接上添加一个data navigate属性，该属性可能是被劫持的任何元素，然后在具有该属性的元素上为vclick事件添加一个全局侦听器

HTML

更新：这里有一个JSFIDLE：

更新2：虽然这个方法很好用，但是当这个例子中的somepage.html被加载时，所有的资产JS、CSS都被加载了；如果您在somepage.html中点击后退按钮，资产将再次加载。我的理解是，pagecontainer'change'方法的作用应该与单击的链接相同，但显然不是。我正在对此进行研究，并将根据需要进行更新。现在请注意，这个解决方案正在挫败使用JQM的部分原因，JQM只加载一些较大的资产一次

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