javascript - 使用 jquery、dom 突变在模态窗口中加载图像

Question

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

但是当我加载网站时，我只能点击前 4 页。那是因为下一页是动态加载的并且 DOM 发生了变化。我如何观察实时 dom 的变化？

站点在线:http://textileworld.esy.es/book.php

函数 $('.show-modal').on('click', function()) 不适用于实时 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>

Answer 1

尝试使用创建委托(delegate)事件的 .on() 的 3 参数版本

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

$(文档).on('click', '.show-modal', function())

为了提高性能，将事件委托(delegate)绑定(bind)到最近的父级，这样事件就不需要冒泡到要执行的文档元素。