JQuery中點擊超鏈接動態修改url連接地址無效

這篇隨筆的標題真是好拗口，想表達的意思是，當點擊超鏈接后，才去修改超鏈接的地址，此時超鏈接仍然鏈接的是是修改之前的頁面，而不是修改之后的頁面。

超鏈接代碼如下：

<a id="chao1" href="http://www.{0}.com" >我是度娘</a>

看到了嗎？度娘並不是度娘，而是{0}，之后的代碼，就是用‘baidu’代替{0}，代碼如下：

        $("#chao1").click(function (event) {
            var htm = $("#div1").html();
            htm = htm.replace("{0}", "baidu");
            $("#div1").html(htm);7         });

經過上面的三條語句，超鏈接的地址雖然被置換成了“www.baidu.com",但是然並卵。瀏覽器的地址欄如圖：

卧槽，我改了半天你就給我看這個，於是我考慮采用直接跳轉的方式：ASP.NET MVC中如何實現頁面跳轉中的第二點，代碼如下：

        $("#chao1").click(function (event) {
            var htm = $("#div1").html();
            htm = htm.replace("{0}", "baidu");
            $("#div1").html(htm);
            window.location = $("#chao1").attr("href");
        });

我尼瑪，鏈接的依然是上面那個然並卵的地址，於是我想到了第三種方案，阻止超鏈接的跳轉，只讓window.location起作用，代碼如下：

        $("#chao1").click(function (event) {
            event.preventDefault();
            var htm = $("#div1").html();
            htm = htm.replace("{0}", "baidu");
            $("#div1").html(htm);
            window.location = $("#chao1").attr("href");
        });

果然，度娘還是愛我的，如圖：

注意 preventDefault()用來阻止元素的默認事件：隨手拋鏈接學習一下

 

可能會有小伙伴會問，怎么可能會有這么奇葩的需求，在點擊超鏈接的時候，才去修改href，可是po主確實是遇到了，po主找到的臨時的解決方案是，在每個可能改變href的地方，都變化href，而上面的解決方案，一次解決。