只有在填充后才在div上执行滑块脚本？

Question

要使滑块脚本起作用，它需要一个特定的html结构，如下所示：

<div class="the-carousel">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

我的问题是我只有这个：

<div id="courseList" class="the-carousel"></div>

然后我要从数组中填充其余内容。

用户点击图片/按钮后，会弹出一个模式，其中包含7个问题和答案的列表。

问题是，即使我将滑块脚本放在最后，并且在click函数内，它仍会在注入任何数组数据之前加载。因此不会创建滑块，因为它只能看到一个div。

这里是modal html和注入数组的脚本......

<div class="workersQA">
    <div class="workers" id="man1" data-modalworkers="first">
        <h3>click</h3>
    </div>
    <div class="workers" id="man2" data-modalworkers="second">
        <h3>click</h3>
    </div>
</div>

<!-- the modal html -->

<div id="modal" data-opened="false">
    <div class="background">
        <div class="container">
            <div class="modal">
                <div class="QA">
                    <div class="modal-header">
                        <span class="close">close</span>
                            <div id="tit_wrapper"></div>
                    </div>
                    <div class="modal-content">
                        <h3 class="ques"></h3>
                        <div id="courseList"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

和js：

(function($) {
    var selectedWorkers = [];
    var dataSourceWorkers = [{
        name: "first",
        subtit: ".worker1-ques",
        title: "worker1",
        image: "man1card.png",

        courses: [{
            id: "1-1",
            ques: "question number one?",
            answer: "answer number one."
        }, {
            id: "1-2",
            ques: "question number 2?",
            answer: "answer number 2"
        }, {
            id: "1-3",
            ques: "question number 3?",
            answer: "answer number 3."
        }, {
            id: "1-4",
            ques: "question number 4",
            answer: "answer number 4"
        }]
    }, {
        name: "second",
        subtit: ".worker2-ques",
        title: "worker2",
        image: "man2card.png",
        courses: [{
            id: "2_1",
            ques: "question number one?",
            answer: "answer number one."
        }, {
            id: "2-2",
            ques: "question number 2?",
            answer: "answer number 2"
        }, {
            id: "2-3",
            ques: "question number 3?",
            answer: "answer number 3."
        }, {
            id: "2-4",
            ques: "question number 4",
            answer: "answer number 4"
        }]
    }];

    $("[data-modalworkers]").click(function() {
        var topic = $(this).data("modalworkers");
        var data = dataSourceWorkers.filter(function(item) {
            return item.name == topic;
        })[0];
        slug = data.name;
        if (data) {
            $(".workersQA #tit_wrapper").html(
                '<img src="images/' +
                data.pic +
                '"/>' +
                "<h2>" +
                data.title +
                "</h2>" +
                '<p class="job_desc">' +
                data.subtit +
                "</p>"
            );
            $(".workersQA #modalTitle").removeClass();
            $(".workersQA #modalTitle").addClass(data.name);
            $(".workersQA #courseList").html("");
            data.courses.forEach(function(course) {
                // create div
                var div = $(
                    '<div id="' +
                    course.id +
                    '"><h3>' +
                    course.ques +
                    '</h3><div><div class="cbp-content"></div><p>' +
                    course.answer +
                    "</p></div></div>"
                ).get(0);
                // add QA to html
                $(".workersQA #courseList").append(div);

            });
        }
        $("#modal").attr("data-opened", true);
        $("#modal").show();
    });
})(jQuery);