防止.html和.append上的页面跳转?

时间:2010-01-04 09:41:09

标签: javascript jquery

当我使用jquery .html或.append在DOM中添加元素时,页面会跳转到该位置。

我怎么能让它不跳,因为我希望我的用户能够点击“将线程保存到收藏夹”并且它不会跳转到“我保存的线程”因为那么用户必须在列表中向下导航线程再次。

编辑:我用过这个:

 // save thread
    $("a.save_thread").live("click", function(event) {
        event.preventDefault();
        $.post('controllers/ajaxcalls/threads.php', {method: 'save_thread', thread_id: event.target.id}, function(data) {
        }, 'json');
        return false;
    });

但是返回false并没有做任何事情。实际上,虽然它不使用append()或html(),但它仍然跳转到页面开始。

3 个答案:

答案 0 :(得分:4)

return falsepreventDefault是阻止关注链接的正确方法。检查您的JavaScript错误控制台。如果处理程序函数中存在异常,则不会返回false并且将跟随链接。

但是,您应该考虑将链接更改为<button>。你在这里所拥有的不是一个环节,而是与任何地方的联系;这是一个动作。按钮是一种更好的建模方法,因为它没有跟踪链接的行为,或者允许用户在新选项卡中单击以打开链接的目标,或者右键单击添加到书签(等等)。因此,您不必担心阻止默认操作停止页面移动。

如果您不希望它看起来像3D按钮,您可以随时使用CSS来重新设置它,例如。 border: none; background: white; color: blue; text-decoration: underline;。虽然你不能在IE中完全重新设置它,但错误地增加了一些额外的填充,这通常无关紧要。

答案 1 :(得分:3)

我认为跳跃不是.html().append()。而是,检查您正在执行的函数是否返回false:

$('a.pseudolink').click(function () {
    $(this).html('foobar!');
    return false; // !!!
});

这可以防止点击<a class="pseudolink" href="#newcontent">,链接目标被激活。

答案 2 :(得分:1)

一个真正的kludge来防止这种情况是在发布这样的帖子之前从元素中删除href属性:

$("a.save_thread").live("click", function(event) {
  $(this).removeAttr("href");
  $.post('controllers/ajaxcalls/threads.php', {method: 'save_thread', thread_id: event.target.id}, function(data) {}, 'json');        
});

您还可以通过保存并在完成操作后重新添加href来恢复href。

var href = $(this).attr('href');
//do actions 
$(this).attr('href', href);

我以前在自己的开发中使用过这个,但看看它是否符合你的目的。