ダイナミックに作成された要素のイベントバインド [Javascript]

$(staticAncestors).on(eventName, dynamicChild, function() {});

$(selector).live( eventName, function(){} );

$(selector).live( eventName, function(){} );

$(document).on( eventName, selector, function(){} );

$(document).on('mouseover mouseout', '.dosomething', function(){
    //マウスオーバーやマウスアウト時に何をしたいか
    // '.dosomething'と一致する要素で発生する
});

$('.buttons').on('click', 'button', function(){
        //ここで何かする
});

<div class="buttons">
    <!-- <button>は動的に生成され、ここに追加される -->
</div>

document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'bu')) {
          // .buがクリックされた
          // 何かやる
    } else if (hasClass(e.target, 'test')) {
        // .testがクリックされた
        // 何か他のことやる
    }
}, false);

function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;
}

var mouseOverHandler = function() {
    // 何かやる
};
var mouseOutHandler = function () {
    // 何かやる
};
$(function() {
    //ドキュメントの読み込み時に、既存の要素に適用する
    $('select').hover(mouseOverHandler, mouseOutHandler);
});
///この次の部分はAjax呼び出しのコールバックにある
$("<select></select>")
    .append( /* 君の<option>s */ )
    .hover(mouseOverHandler, mouseOutHandler)
    .appendTo( /* 選択ボックスが必要な場合はどこでも*/ )
;