Question

我使用jQuery Mobile创建了一个Web应用程序，并使用Cloudmade Leaflet包含了一个地图。地图具有根据数据库中的坐标生成的标记。每个标记都是项目的描述，以及单击标记时弹出窗口中显示的链接。一切正常。该链接访问一个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方式。希望能为你解决这个问题（我只是在这里尝试了它并且有效）

...如果您将'app'作为PhoneGap应用程序而不是纯web应用程序运行，点击链接可能会导致PhoneGap在浏览器中启动内容而不是保留在自己的Web视图中。这在其他地方得到解答：

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

Answer 2

我在jQuery Mobile中开发，默认情况下jQuery移动表单通过ajax调用服务器，你应该像这样添加data-ajax="false"：

<form action="forms-sample-response.php" method="get" data-ajax="false" class="ui-body ui-body-a ui-corner-all">

完整示例：

http://jquerymobile.com/demos/1.0/docs/forms/forms-sample.html

jQuery Mobile和Cloudmade Leaflet链接不起作用

2 个答案: