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，其實是隱藏，並沒有真的關閉。

至於為何多次請求，好像還是不太懂，難道bootstrap對於save的click事件用到事件隊列或者列表存了下來么？求解釋////


http://blog.csdn.net/friskit/article/details/7250688   這個博客講的蠻多，回頭研究一下。