如何制作函数 select 并在新附加的元素上执行？

Question

这个函数应该在点击 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 的新元素。请试试这个 fiddle：https://jsfiddle.net/Lx4et1v8/14/

我该如何解决这个问题？

Answer 1

:)

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();
    });
});

如何制作函数 select 并在新附加的元素上执行？

How to make a function select and execute on a newly appended element?

jquery

dom-events