Question

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

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

SVG中带有示例路径的代码示例。它显示了一个红色方块，其中包含指向维基百科的链接。在jQuery中它运行但不是jQuery Mobile：

＆＃13;

   <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>

＆＃13;

Answer 1

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

我选择了<embed> SVG，而不是解决这种行为或修复jQuery mobile中的代码。它运作得很好。

Answer 2

我也遇到了这个问题。正如已经提到的，jQuery Mobile小部件正在劫持链接。这是迄今为止对我有用的解决方案：我在任何被劫持的链接（可能是任何元素）上添加data-navigate属性，然后为vclick添加一个全局侦听器（{{3具有该属性的元素上的事件。

<强> HTML

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

<强> JS

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

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

更新：这是一个JSFiddle：https://api.jquerymobile.com/vclick/

更新＃2：虽然此方法正常，但在此示例中加载somepage.html时所有资产（JS，CSS）;如果您从somepage.html点击后退按钮，则会再次加载资源。我的理解是pagecontainer('change')方法应该与点击链接相同，但显然不是。我正在研究这个并将适当更新。现在请注意，这个解决方案正在打败使用JQM的部分原因，JQM只加载一些较大的资产。

SVG中的链接与Jquery移动无法正常工作

2 个答案: