我有一本翻页式的在线杂志。每个页面都应该是可点击的,并以高分辨率(模态窗口)向我显示图像。为此,我使用了 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">×</span>
<!-- Modal content -->
<img class="modal-content" id="modal-image">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
最佳答案
尝试使用创建委托(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)到最近的父级,这样事件就不需要冒泡到要执行的文档元素。
关于javascript - 使用 jquery、dom 突变在模态窗口中加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43589079/