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不起作用

回答

相關問題