Блог

Предполагается, что эта функция открывает всплывающее окно всякий раз, когда щелкает элемент класса lightbox_trigger:

 jQuery(document).ready(function($) {
 $('.lightbox_trigger').click(function(e) {
  e.preventDefault();
  var url = $(this).attr("href");
  var lightbox = 
            '<div id="lightbox">'  
                '<div id="boxcontent">'  
      '<div id="lightp"></div>'  
                '</div>'    
            '</div>';
    
   $('body').append(lightbox);
   $.get(url, function(data){
    $("#lightp").html(data);
   });
 });              
});

<a href="somepage.html" class="lightbox_trigger">Click here</a> //newly appended element
 

но это не будет работать с новыми элементами, добавленными в DOM. Пожалуйста, попробуйте эту скрипку: https://jsfiddle.net/Lx4et1v8/14 /

Как я могу это исправить?

🙂

 jQuery(document).ready(function ($) {
    $('body').on('click','.lightbox_trigger',function (e) {
        e.preventDefault();
        var url = $(this).attr("href");
        var lightbox =
            '<div id="lightbox">'  
            '<div id="boxcontent">'  
            '<div id="lightp"></div>'  
            '</div>'  
            '</div>';

        $('body').append(lightbox);
        $.get(url, function (data) {
            $("#lightp").html(data);
        });
        return false;
    });

    $('body').on('click', '#lightbox', function () {
        $('#lightbox').remove();
    });
});