.on | jQuery API

為什麼要特地寫這篇呢？因為以前我只針對 Selector 做 Bind Event

$(function() {
    $("#d1").on("click", function(event){
            // do something
        });
});

關於 jQuery on 的 API 使用
功能說明，我要將 DIV 裡面的 SPAN 裡面的  a Bind一個 click 的Event
觸發事件，就顯示 id , 程式碼如下：

<div id="d1">
<span id="s1"><b>s1</b></span>
    <span id="s2">s2</span>
    <span id="s3"><b>s3</b></span>
</div>
<input id="btn1" type="button" value="add" />

$(function() {
    $("#d1")
        .on("click", "span > b", function(event){
            alert($(this).text());
        });
    $("#btn1").on("click" , function(){
        $("#d1").append('s4');
    });
});

在 on 的第2個參數，可以指定 Selector 裡面的 Data 進行 Bind Event
而且它 Bind 事件，會有 live 的效果

除了可以 Bind 一些常規的 Event , 如：click ，也可以自定 事件名稱
然後，利用 trigger 來觸發自定的事件

$('#foo').on('custom', function(event, param1, param2) {
alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);

備註 :
還有 one 這個 API , 可以僅 Bind 一 次，執行完，Event 就失效了