javascript - 尝试使用jQuery隐藏()一个元素

我有这样做的代码：

$('.attachment-medium').each(function(){
$(this).click(function(){
    var gallWidth = $('.gallery').width();
    $('.gall-output').toggle().css('width', gallWidth);
    var url = $(this).attr('src').slice(0,-12) + '.jpg';
    $('.gall-output-img').html('<img class="img-responsive" src="' + url + ' "/>');
    var imgMeta = $(this).parent().next().html();
    $('#gall-output-meta').html(imgMeta);
});
});

这将生成一个模式叠加层，并显示一个带有类.gall-output的div的img。我为<p class="gall-close">close</p> hide()创建了一个小.gall-output，但是它似乎不适用于以下代码：

$('.gall-close').click(function() {
    $('.gall-output').hide();
});

有没有一种方法可以使用此.gall-close隐藏或切换.gall-output？

谢谢你的帮助。

最佳答案

如果.gall-close是稍后添加的，而不是在加载页面时添加到dom中，则可以使用事件委托附加click-event：

$(document).on("click", ".gall-close", function(){
    $('.gall-output').hide();
});

代替$(document)的任何静态父元素都可以用作容器元素来委托事件。如果这可以解决您的问题，则可以检查https://api.jquery.com/on/#on-events-selector-data-handler，“直接和委托事件”部分：


  “事件处理程序仅绑定到当前选定的元素；在代码调用.on（）时，它们必须存在于页面上。”