學習筆記專區

    <script src="js/jquery-1.12.3.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <script>

     $(function(){

           //練習一

           //使用bind來繫結buttonBind按鈕的click事件

           //按下按鈕後在msg的div中顯示bind的字樣

           //瀏覽網頁時,重複按下buttonBind按鈕,會在div中重複出現bind的字

           $("#buttonBind").bind('click',function(){

              $("#msg").append("bind<br>")

           })

            //練習二

            //使用one來繫結buttonOne按鈕的click事件

            //按下按鈕後在msg的div中顯示one的字樣

            //瀏覽網頁時,重複按下buttonOne按鈕,只會在div中出現一次one的字

            //one只會執行一次

           $("#buttonOne").one('click',function(){

              $("#msg").append("one<br>")

           })

            $('#buttonUnbind').click(function(){

               //練習三

               //將buttonBind按鈕的click事件取消掉

               $("#buttonBind").unbind('click')//取消bind

               $("#buttonOn").off('click')//取消on

            })

       $("#buttonOn").on('click', function() {

              //練習四

              //使用on來繫結buttonOn按鈕的click事件

              //按下按鈕後在msg的div中顯示on的字樣

              //瀏覽網頁時,重複按下buttonOn按鈕,會在div中重複出現on的字(效果跟bind一樣)

              $("#msg").append("on<br>")

           })

           //測試看看

           //按下刪除按鈕(class名稱是btn-danger)時,可以將那一筆資料刪除

           //再試試看

           //按下[add row]按鈕多新增幾筆資料

           //針對新增出來的資料,按下刪除按鈕(class名稱是btn-danger)時,還可以將那一筆資料刪除嗎???(不行)

           //             $('.btn-danger').click(function(){

           //                $(this)：有'.btn-danger'這個calss的標籤<a>

           //               $(this).remove();，←←只刪到自己這個按鈕(欄位還在)

           //                $(this).parent().remove();，←←只刪到自己的欄位(td)

           //                $(this).parent().parent().remove();←←刪除到整行(tr)      

           //             })

           // $('.btn-danger').bind('click',function(){

           //  $(this).parents("tr").remove();

           // })

           //以上兩種方法都不行，因為他們被綁頂在之前的欄位上了，無法抓取到新生成的欄位

           //練習五使用on綁定網頁上刪除按鈕，完成刪除動作

           //'click'事件榜定在tbody，但是作用在tbody之下類別名稱是'.btn-danger'的標籤上

           //注意on的的用法，如果跟bind參數一樣時效果跟bind一樣，只有在加上selector參數時效果才不一樣

       $('#simpleTable>tbody').on('click', '.btn-danger', function() {

              $(this).parents("tr").remove();//刪掉自己的老爸tr，也就是整行

           })//刪除的方法

       $('#buttonAdd').click(function() {

              $('table').append("<tr><td>X</td><td>Y</td><td>Z</td><td><a href='#' class='btn btn-danger'>刪除</a></td></tr>");

              });//增加的方法

       });

    </script>

</body>