0

我有以下代码：

        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;
}
4

2 回答 2

1

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

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

$(document).on("mouseover", ".service-map-container", yourHandlerHere);
于 2013-06-02T06:25:46.683 回答
0

你应该搬家：

$('.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尚不存在。

另外，我建议您不要为叠加层创建动态元素，而是始终使用相同的元素并根据需要隐藏/显示它。

于 2013-06-02T06:28:07.153 回答