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