Question

我有代码执行此操作：

$('.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(); });，但它似乎没有使用此代码：

{{1}}

有没有办法使用.gall-close来隐藏或切换.gall-output？

感谢您的帮助。

Answer 1

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

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

而不是$(document)任何静态父元素都可以作为容器元素来委托事件。如果这可以解决您的问题，您可以查看https://api.jquery.com/on/#on-events-selector-data-handler，部分＆＃34;直接和委派的事件＆＃34;：

＆＃34;事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）的页面上。＆＃34;

试图用jQuery隐藏（）一个元素

1 个答案: