jQuery Mobile 和 Cloudmade Leaflet 链接不起作用

Question

我使用 jQuery Mobile 创建了一个 Web 应用程序，并使用 Cloudmade Leaflet 包含了一个 map 。该 map 具有根据数据库中的坐标生成的标记。每个标记都有该项目的描述以及单击该标记时在弹出窗口中显示的链接。一切都运行良好。该链接访问一个 php 文件，该文件从数据库请求有关该项目的更多信息。

我遇到的问题是，当单击弹出窗口中的链接时，链接会强制浏览器打开并显示其中的内容，而不是使用 jQuery 转换来显示包含更多信息的页面。

我认为 jQuery Mobile 查看链接并在单击链接时应用 ajax 加载和转换存在一些问题。

有谁知道这是否可行以及需要做什么才能使其正常工作？

Answer 1

巴里，

您需要做的是包含一个指向目标 jQuery 移动链接的“#”链接。例如，如果您有一个名为 infoPage 的 JQM 页面，如下所示:

<div data-role="page" id="infoPage" data-add-back-btn="true">
  <header data-role="header" data-theme="c">
    <h1>Video tests</h1>
  </header> 
  <div data-role="content">
     This is where more info would appear...
  </div>
</div>

然后您可以像这样创建标记:

var popup = new L.Popup();
popup.setLatLng( e.latlng );
popup.setContent( "More <a href='#infoPage'>info</a> here." );
map.openPopup( popup );

注意 href='#infoPage' - 这是切换页面的标准 JQM 方式。 希望能为您解决这个问题(我刚刚在这里尝试过并且有效)

...万一您将“应用程序”作为 PhoneGap 应用程序而不是纯 Web 应用程序运行，单击链接可能会导致 PhoneGap 在浏览器中启动内容，而不是停留在其自己的 Web View 中。这在其他地方得到了回答:

Links in remote JQueryMobile sites in a PhoneGap app open safari

What controls whether PhoneGap opens an external browser / Safari?

http://forum.jquery.com/topic/phonegap-jquerymobile-ajax-links-opening-in-browser-window

open link inside the phonegap program