使用jquery，dom突變在模態窗口中加載圖像

Question

我有一本翻頁風格的在線雜志。 每個頁面都應該是可單擊的，並向我顯示高分辨率的圖像（模態窗口）。 我為此使用pageflip.js。

但是，當我加載網站時，我只能單擊前4頁。 那是因為動態加載了下一頁，並且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

嘗試使用.on()的3參數版本來創建委托事件

委派事件的優勢在於，它們可以處理來自后代元素的事件，這些事件在以后的時間添加到文檔中。

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

為了提高性能，將事件委托綁定到最近的父對象，因此事件無需冒泡到要執行的document元素。