Javascript 使用jquery、dom在模态窗口中加载图像

我有一本翻页式的在线杂志。每个页面都应该是可点击的，并在高分辨率（模式窗口）中显示图像。我使用了一个pageflip.js

但当我加载网站时，我只能点击前4页。这是因为接下来的页面是动态加载的，DOM会发生变化。 我怎样才能观察一个真实的世界

该网站在线：

（'click'，function（））上的函数

$（'.show modal'）。不适用于实时dom更改

我使用以下代码打开模式窗口：

$('.show-modal').on('click', function(e){
                e.preventDefault();
                var highres = null;
                highres = $(this).parent().prev().attr('data-highres');
                $('.modal').css('display', 'block');
                $('#modal-image').attr('src', highres);
             });

页面图像以php加载：

'<img id="img" data-highres="'.$imageHighResolution.'" src="'.$image.'" usemap="#image'.$i.'"/>',
                    '<map name="image'.$i.'">',
                    '<area class="show-modal" shape="rect" coords="35,1,725,1094" alt="clickable">',
                    '</map>';

”，
'',
'',
'';

以及模式窗口的html：

<!-- Modal -->
    <div id="myModal" class="modal">
        <!-- Close button -->
        <span class="close">&times;</span>
        <!-- Modal content -->
        <img class="modal-content" id="modal-image">
        <!-- Modal Caption (Image Text) -->
        <div id="caption"></div>
    </div>


&时代；
尝试使用创建委派事件的
.on（）
的3参数版本

委托事件的优点是，它们可以处理来自后代元素的事件，这些子元素在以后添加到文档中

$（文档）。在（'click'，'show modal'，function（））上

为了提高性能，请将事件委派绑定到最近的父级，这样事件就不需要冒泡到要执行的文档元素。
这解决了我的问题，但现在我（当我单击新页面时）在几秒钟内得到一个旧图像，而不是加载正确的图像。@GregOstry我用不同的浏览器测试了它。Edge（IE）和FireFox也给了我同样的错误，但Chrome、Safari和Opera的效果与预期一样。用户关闭模式后，删除img标记或源标记。//关闭模式内容（x按钮）
$（'span'）。打开（'click'，function（）{$（'modal'）。css（'display'，'none'）；highres=null；}）我添加了highres=null；但这并没有解决我的问题problem@GregOstry只能将变量设置为null。您至少必须进行DOM操作。例如，
$（'#模态图像'）.attr（'src'，''）