bootstrap学习入门

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