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 not working之类的链接来绕过它并取得了一些成功，但我对于为什么一个动态元素与事件处理程序和其他不兼容的原因有所不同。

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

Answer 1

您需要使用委托事件处理程序将事件附加到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加载时可用的最接近的静态元素。

Answer 2

试试这个

$('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)));

Jquery .on（）处理一些动态元素而不是其他元素

2 个答案: