1. 程式人生 > >bootstrap模態框html重置後,繫結的click方法失效

bootstrap模態框html重置後,繫結的click方法失效

開發過程中,經常用到bootstrap的modal。當動態的改變了modal的html,或者表單校驗結果顯示了,亦或只是單純的做了一些輸入。這時候關閉modal再開啟,還是原先的樣子。如果想要重置,我經常用的辦法是,重置元素的html。

首先在頁面載入後在一個全域性變數中儲存modal的html。

var modalHTML = $("#myModal").html();
然後再每次開啟modal時,都重置html。
$("#myModal").html(modalHTML);
這樣就顯示了一個全新的模態框。

但這樣有一個問題。比如說原先模態框裡面有個表單,有個按鈕的id="testButton",然後我在js中給他綁定了click方法。

$("#testButton").click(function(){
alert(666)
});
當我重置了html之後,這個click方法就不生效了。

解決辦法是,在html程式碼中,直接給元素繫結onclick事件。這樣重置html之後也能觸發onclick事件去執行對應的function。