jQuery对话框调用重定向页面

时间:2011-04-28 09:29:10

标签: javascript jquery jquery-ui jquery-plugins

我正在使用jQuery对话框插件。

对话框div在页面加载时设置(但未打开):

$(document).ready(function(){
  $('#foo').dialog({autoOpen:false});
});

然后一个超链接应该打开对话框:

<a href="javascript:$('#foo').dialog('open');">Show dialogue box</a>

但是这会打开对话框,然后稍后重定向到一个网址为javascript:$('#foo').dialog('open');的页面!

我试过返回false:

<a href="javascript:$('#foo').dialog('open');return false;">Show dialogue box</a>

但是当我点击它时,链接根本没有响应。

我知道这必须与JavaScript的一个臭名昭着的微妙之处有关,但我无法解决这个问题。

有人可以帮忙吗?

2 个答案:

答案 0 :(得分:0)

  

然后一个超链接应该打开对话框:

     

<a href="javascript:$('#foo').dialog('open');">Show dialogue box</a>

     

但这会打开对话框,然后稍后重定向到一个带有URL javascript的页面:$('#foo')。dialog('open');!

那应该不会发生。伪协议javascript:不涉及页面加载,当然也不涉及HTTP。我不推荐它(我会使用jQuery的click处理程序),但它应该可以工作。

  

我试过返回false:   ...   但是当我点击它时,链接根本没有响应。

不应该发生。

引用的代码很好(在这里工作,例如:http://jsbin.com/inixa5),所以问题必须出在页面的其他部分。

更新:好的,这很奇怪,IE6和IE7不喜欢这样;我认为这是因为dialog返回一个值。您可以通过结束调用以在函数中打开对话框并且不显式返回任何内容来解决这个问题:

<a href="javascript:showDialog('#foo');">Click Me</a>
<script>
  $("#foo").dialog({autoOpen: false});
  function showDialog(selector) {
    $(selector).dialog('open');
  }
</script>

或者(这是超级hacky)确保javascript:块中的最后一个表达式是undefined

<a href="javascript:$('#foo').dialog('open');undefined;">Click Me</a>
<script>
  $("#foo").dialog({autoOpen: false});
</script>

或者使用onclick

<a href="#" onclick="$('#foo').dialog('open'); return false;">Click Me</a>
<script>
  $("#foo").dialog({autoOpen: false});
</script>

但无论如何,强烈建议使用DOM2样式事件处理程序挂钩:

<a href="#" name='openSesame'>Click Me</a>
<script>
  // This _can_ be immediately after the anchor, but I'd put it in
  // a separate, since .js file for the page that you load just before
  // the closing body tag.
  $("#foo").dialog({autoOpen: false});
  $("a[name=openSesame]").click(function() {
    $("#foo").dialog('open');
    return false;
  });
</script>

Live example(显然,你可以使用任何有意义的选择器,你不必给锚name [或id]。)

关于这一点的一个好处是,如果禁用了JavaScript(称为progressive enhancement),你可以让锚点将用户带到有意义和/或有用的地方。

答案 1 :(得分:0)

将链接更改为:

<a href="javascript:void(0)" onclick="$('#foo').dialog('open')">
   Show dialogue box
</a>

最好避免将javascript放入href中。 更好的是给它一个类,而不是通过jquery向它添加一个click事件。