点击后，删除之前加载的html部分

Question

这应该是非常直接的，但由于某种原因它没有按预期工作。我有一个带有更多阅读按钮的博客文章，当点击它时会显示一个覆盖整个页面的模态（绝对定位在整个页面上）。

在该模态上，有一个按钮可以删除内容，即模态本身。

    $('.blog-block .blog-entry-extra-tag').on('click', function(){
        console.log('clicked first read More');
        $( "#blog-modal" ).load("blog/blog-entry-1.html");
    });

    $(".close-blog-post button").on("click", function(){
        $( "#blog-modal" ).empty();
        console.log("clicked close button")
    });

第一次点击事件有效并加载内容。第二次单击事件不起作用。如果我在控制台中输入代码：

$( "#blog-modal" ).empty();

它确实删除了我想要的内容。那为什么它不起作用？我也看不到控制台日志。