1

我需要使用 jQuery mobile 设置相对于当前页面 url 的按钮的 href 值。

所以我天真地写了以下代码：

var path = window.location;
path = path.replace( "shop","edit" );
$("#btnEdit").setAttr( "href", path );

页面的 url 是http://mysite/shop/1并且按钮的 href 应该设置为http://mysite/edit/1。

当此代码插入到我的“pageinit”处理程序的顶部时，我看到浏览器（firefox 和 chrome）位置栏中的 url 更改为http://mysite/shop/shop并且页面显然已重新加载，所以我得到一个 404 错误，因为它必须在 /shop/ 之后有一个数字，并且它的值应该是 1。

即使我将其注释掉，重新启动 Web 服务器，浏览器也会在其 url 位置字段中自动将http://mysite/shop/1替换为http://mysite/shop/shop 。？！

我必须评论这些说明，重新启动服务器以及避免此 url 替换的任何内容。

到底是怎么回事 ？如何在没有这种讨厌的副作用的情况下获取页面位置 url 并设置我的按钮 href 值？

编辑1：

  1. 我确实应该使用.attr或.prop而不是不存在的 .setAttr 。
  2. url 更改仅在 chrome 和 firefox 中显示，而不在 iPad、Android 或 IE9 中显示。运行chrome调试工具，在matches.call( document.documentElement, "[test!='']:sizzle" );指令处好像有jQuery抛出的DOMException . 我不知道这意味着什么以及为什么它会导致使用不同的 url 重新加载页面。

编辑2：

  1. 我使用 fapws 作为 Web 服务器，使用 mako 作为模板。在我擦除了 mako 生成的缓存 python 文件后，url 更改消失了。？！
  2. 按照建议，我应该使用.attr和window.location.href。这有效，并且按钮的 href 属性设置为正确的值。
  3. 尽管它仍然无法正常工作。我现在看到了一种新的意外和不良行为。单击按钮时，位置栏中的 url 更改为http://mysite/edit/1，它执行商店页面的 pageinit (?!)，然后加载编辑页面而不执行其 pageinit 事件。

解决方案：

在 html 文件中，我用默认的 href 值定义了这个按钮，没有什么特别的：

<a href="#" data-role="button" data-icon="pencil" id="btnEdit"> Edit </a>

在脚本文件中，更准确地说是在 $(document).on('pageinit',...) 的处理程序中，我现在有了这段代码，它设置 href 值，但也将 rel="external" 属性添加到按钮. 

var path = window.location.href;
path = path.replace( "shop","edit" );
$("#btnEdit").attr( "href", path ).attr( "rel", "external" );

页面不再自动重新加载，并且加载的奇怪行为已被删除。这是因为 jQuery Mobile 中 <a> 标记的默认行为是使用 ajax 加载目标页面，而不是使用正常的完整页面加载。属性 rel="external" 禁用此行为，然后引用的页面正常完全加载。此行为在此处的 jQM 文档中进行了描述。

注意：尽管许多答案具体有助于帮助我解决这个问题，但我检查了 Mad Man Moon 的答案，因为他非常有帮助并且得分较少。如果可以检查多个答案，我会做到的。

4

4 回答 4

2

使用attr代替setAttr （除非您不使用自定义函数或某些框架/库）

$("#btnEdit").attr( "href", path );

至于 URL 自动更改，请查看您是否在.htaccess文件中设置了 URL 重写，或者是否有可能更改其他文件中的 URL。

于 2012-06-10T11:20:10.220 回答
2

即使我将其注释掉，重新启动 Web 服务器，浏览器也会在其 url 位置字段中自动将 ~/shop/1 替换为 ~/shop/shop。？！

我必须评论这些说明，重新启动服务器以及避免此 url 替换的任何内容。

  1. 我有点困惑。您要评论的“它”是什么？
  2. 即使您的替换是针对您对 window.location 的变量引用执行的，它也应该将“shop”替换为“edit”，因此重定向应该是“mysite/edit/1”（除非 js 正则表达式引擎正在处理1 作为捕获指数？）
  3. 根据您的 RESTful 样式 URL，我怀疑您正在使用某种服务器端 MVC 框架。如果是这样，重定向很可能是服务器端问题，与替换无关。
  4. 最后，不要设置 path = window.location，而是将其设置为window.location.href。window.location 是包含 URI 属性（href、搜索、哈希等）的对象。window.location.href 是完整 URL 的字符串属性。

编辑：我决定自己做一个小测试，并确认问题在于您正在设置 path = window.location。设置path = window.location.href并且您的代码将起作用。

于 2012-06-10T12:14:56.580 回答
1

试试这个

var path = window.location;
path = path.replace( "shop","edit" );
$("#btnEdit").prop( "href", path );
于 2012-06-10T11:24:22.103 回答
1

您的问题是它path充当 的别名window.location，因此path.replace()它window.location.replace()会触发重定向。

解决方案：.toString()在末尾添加window.location以获取字符串值而不是对象。var path = window.location.toString()

于 2012-06-10T11:47:24.027 回答