Question

我有以下代码：

        if ($('body.page-service-map').length || $('body.page-contact').length) {
            $(document.body).append('<div class="black-overlay"></div>');
        }

        $('body.page-service-map img, body.page-contact img').on('click', function () {
            var c = $(this).clone();
            c.addClass('service-map-expanded');
            $(document.body).append('<div class="service-map-container"></div>');
            $('.service-map-container').append('<div class="service-map-close"></div>', c);
            $('.black-overlay').show();
        });

        $('.service-map-close').on('mouseover', function () {               
            $('.service-map-container').remove();
            $('.black-overlay').hide();
        });

这是一个自定义图像弹出窗口。试图为它实现关闭按钮。看到关闭按钮，但鼠标事件不会触发它。虽然按钮对css悬停效果有正确的反应。这是css：

.service-map-container {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -500px;
    margin-top: -300px;
    width: 1000px;
    z-index: 9990;
}

.service-map-close {
    position: absolute;
    top: -25px;
    right: -25px;
    width: 28px;
    height: 28px;
    background: url('../images/close.gif') no-repeat scroll 1px 1px #FFF;
    z-index: auto;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    cursor: pointer;
}

.service-map-close:hover {
    background-position: -25px 1px;
}

.service-map-expanded {
    width: 1000px;
    z-index: auto;
}

.black-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8888;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    display: none;
}

Answer 1

这是一个猜测：因为当您运行该代码时不存在.service-map-close元素，所以没有任何东西可以将事件绑定到。

尝试使用以下语法将事件绑定到文档，这样即使对于稍后添加到文档中的元素（未经测试），它仍然会发生：

$(document).on("mouseover", ".service-map-container", yourHandlerHere);

Answer 2

你应该搬家：

$('.service-map-close').on('mouseover', function () {               
    $('.service-map-container').remove();
    $('.black-overlay').hide();
});

在$('body.page-service-map img, body.page-contact img').on('click', function() {的底部。实际上，如果你不这样做，你就不会绑定任何内容，因为.service-map-closer还不存在。

另外，我建议你不要为叠加层创建一个动态元素，但只需使用相同的内容并隐藏/显示它。

事件不会在固定定位元素上触发

2 个答案: