Question

我有一个链接：

<h2><a href=?p=article&aid='.$article->id.'" onclick="loadPage('article'); return false;">.$article->title.</a></h2>

并调用此函数：

function loadPage(page){
    $("#content").html("Loading...");

    $.post("page.php", {p: page}, function(data){
        $("#content").html(data);   
    });
}

但是在我的javascript运行之后，href仍处于活动状态。我用过return false;在我的onClick之前，为了防止这种情况，但这次它不起作用????

Answer 1

最好使用jQuery将click事件绑定到您的函数，因为逻辑更好地分离。

$('h2 a').click(function(event) {
    $("#content").html("Loading...");

    $.post("page.php", {p: page}, function(data){
        $("#content").html(data);   
    });

    return false;
});

通常情况下，如果href仍处于活动状态，则可能存在JavaScript错误。

修改：您还可以使用event.preventDefault()来阻止href跟随此方式绑定的点击功能。

最后，href确实形成得很好（缺少一个开头的引用）。这是一个错字吗？

Answer 2

您的脚本看起来有错误，但未到达返回区块。如果添加try catch，它将忽略脚本中的错误。

function loadPage(page){
try{
    $("#content").html("Loading...");

    $.post("page.php", {p: page}, function(data){
        $("#content").html(data);   
    });
} catch(err){}
}

Answer 3

我最喜欢的方法是替换href属性。这样做的好处是可以保持与非JS客户端的兼容性，而不必处理“停止”事件或任何此类魔法。例如：

function unobtrusiveLinkSetup(link) {
    // replace the about link's href
    J(link).attr('jshref', J(link).attr('href'));
    J(link).removeAttr('href');

    // handle the link's action
    J(link).click(function(index) {
            J(this).stop();
            // make a request in the background
            J.get(J(this).attr('jshref'), function(result) {
                // whatever you need to do with the link..
            });
    });
}

然后，您可以在文档的就绪功能中或其他任何位置执行unobtrusiveLinkSetup("#myLink");。

调用onClick函数后停止href链接

3 个答案: