今天用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> 这个博客讲的蛮多，回头研究一下。
|