今天用bootstrap做一個彈出框，用於創建project，代碼很簡單：
<input type="button" class="btn add" name="add_project" value="Add"/> <div id="add_proj" class="modal hide fade" role="dialog"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Add a project:</h3> </div> <div class="modal-body"> <p>Project name: <input type="text" value="" name='projectName' /> </p> <p>Game Title: <input type="text" value="" name='gameTitle' /> </p> <p>Description: <input type="text" value="" name='description' /> </p> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a> <a href="#" class="btn btn-primary" name='save'>Ok</a> </div> </div>
然后在js里截獲click事件， 在這個click里添加add project的代碼：
$(
"input[name='add_project']"
).click(
function
(){
$(
"#add_proj"
).modal(
"show"
);
$(
"a[name='save']"
).click(
function
(){
var
paras = {};
paras.projectName = $(
this
).parents(
"#add_proj"
).find(
"input[name='projectName']"
).val();
paras.gameTitle = $(
this
).parents(
"#add_proj"
).find(
"input[name='gameTitle']"
).val();
paras.description = $(
this
).parents(
"#add_proj"
).find(
"input[name='description']"
).val();
console.log(paras);
addProj(paras);
$(
"#add_proj"
).modal(
"hide"
);
});
});
|
在測試的時候發現，當$("#add_proj").modal("hide");的時候，modal並沒有清除，而是保存了上次填寫的值。然后重新show打開modal，填寫值，繼續點save的buton進行提交，會導致重復多次請求的情況，就是save的click事件被觸發了n次（n為modal之前被點擊過的次數累加之和）——
在網上搜了一下，bootstrap一般是通過下面這樣的方式打開，data-toggle是一個很關鍵的屬性，然后href來指定打開的modal的id：
<
a
data-toggle
=
"modal"
href
=
"#add_proj"
class
=
"btn btn-primary"
>Add Project</
a
>
|
修改成這樣的方式以后就ok了。
思考了下整個過程，應該是通過
$(
"#add_proj"
).modal(
"show"
);打開modal，再通過
|
$(
"#add_proj"
).modal(
"hide"
);關閉modal，其實是隱藏，並沒有真的關閉。<BR><BR>至於為何多次請求，好像還是不太懂，難道bootstrap對於save的click事件用到事件隊列或者列表存了下來么？求解釋
////<BR><BR><BR><A href="http://blog.csdn.net/friskit/article/details/7250688">http://blog.csdn.net/friskit/article/details/7250688</A> 這個博客講的蠻多，回頭研究一下。
|