JQuery 灯箱 - 无法关闭灯箱

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

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

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

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

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

---

编辑：你可以像下面这样：

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

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

更新的小提琴：Code，Full screen