Question

我已经构建了一个网页，并且在网页中是一个div，然后通过AJAX调用填充以下内容： -

<div class="latest-jobs">
    <ul class="list-of-jobs">
        <li>
            <div class="job">
                <h3><a href="">Job Title</a></h3>
                <ul>
                    <li><span>Location</span></li>
                    <li><span>JOb Type</span></li>
                    <li><span>Salary</span></li>
                    <li><span>Ref: JOB-REF-1</span></li>
                </ul>
                Description
                <a href="#">more &gt;</a>
            </div>
        </li> 
        <li>
            <div class="job">
                <h3><a href="">Job Title</a></h3>
                <ul>
                    <li><span>Location</span></li>
                    <li><span>JOb Type</span></li>
                    <li><span>Salary</span></li>
                    <li><span>Ref: JOB-REF-1</span></li>
                </ul>
                Description
                <a href="#">more &gt;</a>
            </div>
        </li>
        <li>
            <div class="job">
                <h3><a href="">Job Title</a></h3>
                <ul>
                    <li><span>Location</span></li>
                    <li><span>JOb Type</span></li>
                    <li><span>Salary</span></li>
                    <li><span>Ref: JOB-REF-1</span></li>
                </ul>
                Description
                <a href="#">more &gt;</a>
            </div>
        </li> 
    </ul>
</div>
<script type="text/javascript">
    setTimeout(SlickSlider,2000);
</script>

该函数初始化SlickSlider插件（http://kenwheeler.github.io/slick/）的插件，但谷歌浏览器返回以下控制台错误： -

“未捕获的ReferenceError：未定义SlickSlider”

我认为这与函数调用和脚本所在的范围有关。 SlickSlider函数确实存在于页面底部的JavaScript文件中，但我认为因为对该函数的调用是在AJAX加载的div中，它无法在页面底部的文件中看到JS函数？

只要从不在AJAX加载区域内的某个地方调用该函数，就可以找到该函数。

有人可以建议如何使函数调用不返回上述错误吗？

干杯！

修改在这里添加了JS函数： -

function SlickSlider() {
    if ($('.blue-section .list-of-jobs').length) {
        $('.blue-section .list-of-jobs').slick({
            autoplay: false,
            centerMode: false,
            nextArrow: '<span class="right-btn next-page"><i class="icon"></i></span>',
            prevArrow: '<span class="left-btn prev-page"><i class="icon"></i></span>',
            dots: false,
            infinite: true,
            variableWidth: false,
            speed: 300,
            slidesToShow: 3,
            slidesToScroll: 3,
            responsive: [
              {
                  breakpoint: 1170,
                  settings: {
                      slidesToShow: 2,
                      slidesToScroll: 2,
                      infinite: true
                  }
              },
              {
                  breakpoint: 600,
                  settings: {
                      slidesToShow: 1,
                      slidesToScroll: 2
                  }
              },
              {
                  breakpoint: 480,
                  settings: {
                      slidesToShow: 1,
                      slidesToScroll: 1
                  }
              }
            ]
        })
    }
}

Answer 1

根据上面的建议，我添加了setTimeout（SlickSlider（），500）;这给了AJAX调用足够的时间来恢复HTML，并且SlickSlider插件被加载到页面中。在这1/2秒额外的时候，插件工作正常。我想，由于AJAX调用，HTML的呈现速度很快。

@Clayton Leis - 我担心这也是问题所在，但似乎只是快速加载。

为每个人的干杯提供帮助！

使用JavaScript函数将内容AJAXing到页面中

1 个答案: