Question

我创建了一个JQuery灯箱，它只是在灯箱内的浏览器中心显示一个div 我希望当用户点击灯箱周围的透明背景时将其删除但是，当点击div时它也会被移除。

http://michaeloneill.ie/cs230/lightbox/lighbox.html

JQuery

$(document).ready(function($) {
    //click on the button
    $('.viewCart').click(function() {

        //markup for the lightbox
        var lightbox =  '<div id="lightbox">'+
    '<div id="lightboxContent">'+
        '<h3>Your Cart</h3>'+
    '</div>'+
        '</div>';

        //append the lightobx
        $('body').append(lightbox);                     
     });

     //remove the lightbox
     $('#lightbox').live('click', function() { //use live because lightbox can be added and removed dynamically
         $('#lightbox').remove();
     });

});

Answer 1

您可以通过应用 event delegation 来使用 .on() ，因为您的#lightbox已动态添加到DOM：

事件委托允许我们将单个事件监听器附加到父元素，将为匹配选择器的所有子项触发，这些孩子现在是否存在，或将来是否存在。

$('body').on('click', '#lightbox', function() {
    $(this).remove();
});

基本上，在这种情况下，事件委托将帮助您将click事件附加到这个新创建的#lightbox元素。

编辑：你可以这样做：

//remove the lightbox
$(document).on('click', '#lightboxContent,.viewCart', function (e) {
    e.stopPropagation();
});

$(document).on('click', function (e) {
    $('#lightbox').remove();
});

更新小提琴： Code ， Full screen

JQuery Lightbox - 无法关闭灯箱

1 个答案: