将 HTML 附加到页面后，程序无法识别 .modal("show") 函数

Question

我正在编写一个程序，其中点击事件处理程序向我的节点服务器发出 ajax 请求，然后在车把部分内呈现信息并将其发送回客户端（res.render("partials/scraped-article", data); ).客户端 javascript 将此 html 附加到文档并使用 bootstrap .modal("show") 函数显示模态。该程序在第一次触发 click 事件处理程序时显示模态，但之后无法识别 .modal("show") 函数。有办法解决这个问题吗？

客户端Javascript：

$(document).on("click", "#scrape-options li", function(){
    var choice = $(this).text();
    var request;

    if(choice === "website1")
        request = "/scrape/website1";
    else
        request = "/scrape/website2";

    $.ajax({
        type: "GET", 
        url: request
    }).then(function(response){
        $(".news-article").remove();

        $("footer").append(response);

        $('.news-article-img').each(function(i, element){
            $(this).css({'height': ($(this).next().height() + 'px')});
        });

        $("footer h1").addClass("display-none");
        $("#articles-added").text($(".news-article").length);
        $(".modal").modal("show");
    });
});

Answer 1

事实证明，即使您正在渲染部分内容，从服务器发送的响应也会嵌入到默认模板中（即，它将是一个完整的 HTML 文档）。如果您只是将它添加到 DOM，您将第二次插入 Bootstrap 的脚本，这将做一些奇怪的事情，例如禁用 $(...).modal 函数。相反，您应该使用 array.split 方法提取正文 HTML，然后将其附加到 DOM。

将 HTML 附加到页面后，程序无法识别 .modal("show") 函数

Program does not recognize .modal("show") function after appending HTML to page

html

javascript

node.js

twitter-bootstrap-4

express-handlebars