jQuery動態綁定

一、原始需求

在實際項目的時候，遇到了一個問題，就是通過JS動態生成的元素，無法觸發JS事件。

原始的JS代碼：

$(function () {
    $(".original").click(function () {
        alert("123");
    });
})

上述類型的JS代碼在處理隨着頁面加載而加載的DOM元素是沒有問題的。但是在處理頁面加載完成后，通過動態添加的方式添加上的元素是無效的，需要另外利用Jquery綁定。

動態添加元素的JS代碼：

$(function () {
     $(".run").click(function () {
     var btn = "<button class='original'>我是新來的的</button>";
     $(".out").append(btn);
     });
 })

此時如果點擊 新添加的按鈕，通過上述聲明式無法處理響應事件的。

PS：至於原因是什么，這個我也不太清楚。

二、jQuery的on方法

通過查閱相關說明，發現jQuery的on()方法是支持在動態添加的元素上綁定事件的，使用見：

官網說明（英文）：官方API解釋

中文說明（中文）：中文API解釋（推薦）

詳細說明請參考上述網站，這里只提出幾個重點來講解：

1. 使用格式:jQueryObject.on( events [, selector ] [, data ], handler )---[此為可選項]
2. 解釋：events為單個或多個事件，handler為觸發事件要執行的動作。
3. 對於selector而言，如果為null或不寫那么是綁定jQueryObject匹配到的元素;如果不為null，則表明綁定的是jQuyerObject的后台元素中所有符合selector要求的元素。

三、處理方法

<script type="text/javascript">
        $(function () {
            // 方法1
            $(document).on("click", ".original", function () {
                alert("HHHH");
            });
            //無效？
            $(".original").on("click", function () {
                alert("HHHH");
            });
        })
    </script>

方法1肯定有效，但是很奇怪方法2無效。。。

四、補充

思考好了再補充，留待此次。。。