jquery - Jquery .on() は一部の動的要素で動作し、他の要素では動作しません

Question

ページ上の要素にイベント ハンドラーをアタッチしようとしたときに、小さな問題が発生しました。

私がハンドラーにアタッチしている要素も実行時に動的に作成され、一部はイベントで機能し、一部は機能しません。

たとえば、次のようにするとうまくいきます。

// Setup full screen button
fullscreenButton = document.createElement("img");
fullscreenButton.src = "/media/site-images/fullscreen.svg";
fullscreenButton.setAttribute("class", "fullscreenButton");

$(fullscreenButton).on("click", (function (video) {
    return function () {
        if (video.requestFullScreen) {
            video.requestFullScreen();
        } else if (video.webkitRequestFullScreen) {
            video.webkitRequestFullScreen();
        } else if (video.mozRequestFullScreen) {
            video.mozRequestFullScreen();
        }
    };
}(this)));

ビデオはフルスクリーンで問題なく表示されます。ただし、次のようなことをすると:

// Setup the div container for the video
videoContainer = document.createElement("div");
videoContainer.setAttribute("class", "videoContainer");
$(this).wrap(videoContainer);

// When the hover leaves, hide the controls
$(videoContainer).on("mouseleave", (function (controlsBox) {
    return function () {
        $(controlsBox).fadeTo(400, 0);
        $(controlsBox).clearQueue();
    };
}(controlsBox)));

// If the video itself is clicked, play/pause the video
$(videoContainer).on("click", (function (vid, playPauseButton) {
    return function () {
        playPause(vid, playPauseButton);
    };
}(this, playPauseButton)));

イベントは発生しません。

私は.on() jqueryのようなリンクを読んで使用して、いくつかの成功を収めましたが、ある動的要素がイベントハンドラーで機能し、他の要素で機能しない理由の違いについて混乱しています。

シバン全体への JSfiddle はこちらです: http://jsfiddle.net/m4twG/1/ (明らかに進行中の作業)