Question

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

但是当我加载网站时，我只能点击前4页。那是因为下一页被动态加载并且DOM发生了变化。我怎么能观察到现场变化？

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

函数$('.show-modal').on('click', function())不适用于实时转换。

i使用以下代码打开模态窗口：

$('.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

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

委托事件的优势在于，他们可以处理稍后添加到文档中的后代元素中的事件。

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

为了提高性能，请将事件委托绑定到最近的父级，因此事件不需要冒泡到要执行的文档元素。

使用jquery，dom mutation

1 个答案: