1

尝试将事件处理程序附加到页面上的元素时遇到了一个小问题。

我附加处理程序的元素也是在运行时动态创建的，有些处理事件，有些不处理。

例如以下工作很好：

// 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 之类的链接并没有成功地绕过它，但我对为什么一个动态元素与事件处理程序和其他不一起使用的区别感到困惑。

整个shebang的JSfiddle在这里：http: //jsfiddle.net/m4twG/1/（显然正在进行中）

4

2 回答 2

2

您需要使用委托事件处理程序将事件附加到在 DOM 加载后动态创建的元素。尝试这个：

$(document)
    .on("mouseleave", '.videoContainer', (function (controlsBox) {
        return function () {
            $(controlsBox).fadeTo(400, 0);
            $(controlsBox).clearQueue();
        };
    }(controlsBox)))
    .on("click", '.videoContainer', (function (vid, playPauseButton) {
        return function () {
            playPause(vid, playPauseButton);
        };
    }(this, playPauseButton)));

请注意，为了获得最佳性能，document应将其更改为在 DOM 加载时可用的最接近的静态元素。

于 2013-11-09T14:00:32.130 回答
0

像这样试试

$('body').on("mouseleave", '.videoContainer',  (function (controlsBox) {
    return function () {
        $(controlsBox).fadeTo(400, 0);
        $(controlsBox).clearQueue();
    };
}(controlsBox)));
$('body').on("click", '.videoContainer', (function (vid, playPauseButton) {
    return function () {
        playPause(vid, playPauseButton);
    };
}(this, playPauseButton)));
于 2013-11-09T14:02:05.767 回答