如何在模式引导程序4中加载jQuery

Question

因此，在单击页面上适合工作的按钮后，此代码可很好地加载10个额外的“文章”。

$(function(){
    $(".trick-show").slice(0, 10).css('display', 'flex'); // select the first ten
    $("#loadMore").click(function(e){ // click event for load more
        e.preventDefault();
        $(".trick-show:hidden").slice(0, 5).css('display', 'flex'); // select next 5 hidden tricks and show them
        if($(".trick-show:hidden").length === 0){ // check if any hidden tricks still exist
            $("#loadMore").attr('disabled', 'disabled'); // Add disabled on button after the last trick is shown
            alert("It was your last load ! No more tricks to show..."); // alert if there are none left
        }
    });
});

问题是，当我在bootstrap 4模态中使用相同的jQuery代码时。第一篇文章的显示效果很好，但是单击按钮时却无任何作用。我在考虑添加setTimeout或使用show.bs.modal，但我不知道确切的位置。

感谢您的帮助，

Answer 1

尝试JQuery .on（）方法

$(document).on("click", "#loadMore", function(event){
     e.preventDefault();
        $(".trick-show:hidden").slice(0, 5).css('display', 'flex'); // select next 5 hidden tricks and show them
        if($(".trick-show:hidden").length === 0){ // check if any hidden tricks still exist
            $("#loadMore").attr('disabled', 'disabled'); // Add disabled on button after the last trick is shown
            alert("It was your last load ! No more tricks to show..."); // alert if there are none left
        }
});