生成的动态内容无法触发点击

Question

我有这样的情况，我需要从点击其他元素触发点击其他元素。更具体地说，我有缩略图的画廊。当您将鼠标悬停在缩略图上时，描述框将覆盖整个缩略图。之后，我需要在缩略图上触发click事件，这样它就可以运行lightbox了。为了实现这一点，当我点击描述时，我需要做一些事情。

这是html：

<div id="gallery">
<!-- Content from handlebars that is loaded dynamicaly from template file via ajax -->
    <a class="lightbox lightbox-frame" href="img/gallery/{{filename}}.jpg" data-lightbox="gallery" data-category="{{category}}">
        <img src="img/gallery/thumbs/{{filename}}.jpg" alt=""/>
    </a>
    <p class="gallery-image-description">{{description}}</p>
<!-- Content from handlebars -->
</div>

我正在试这个，但是它不起作用。它适用于statick内容，但此内容是通过Ajax加载的，然后使用Handlebar进行编译：

('#gallery').on('click', '.gallery-image-description', function () {
    $(this).prev().click();
});

所以问题是:你知道我如何通过点击其他元素来触发动态生成的内容的点击事件吗？

Answer 1

我不确定这是否会有帮助，因为我从来没有使用过lightbox，我也不能确定lightbox和JS之间没有交互。

但是这里有一个FIDDLE，

具有动态生成的div/image

悬停时，用文本覆盖图像

单击父节点将弹出警报

JS

$('.imagestuff').on('click', function(){
       alert('clicked');
});