jQuery 不特定于 *this* 页面的单个脚本文件 - 显示 "undefined is not a function"

Question

我知道 jQuery noConflict 包装器，并使用 wp_enqueue_script() 加载我的脚本。在下划线 (_s) 入门主题之后，我将我的脚本 (example.js) 排入队列，依赖于页脚中的 jQuery。为了避免 'Render Blocking javacript' 警告，我将所有单独的 jQuery 代码粘贴到那个文件中。

假设，

• 我那里有一个滑块功能，特定于 front-page.php、
• 但是TinyNav功能在那里，具体到站点的所有页面，
• 和仅特定于投资组合页面的同位素功能

example.js:

jQuery(document).ready(function($) {

    //add .js to html
    $('html').removeClass('no-js').addClass('js');

    //front-page slider code
    //$('container').doSlider();

    //portfolio page isotope code
    //$('container').activeIsotope();

});

所有代码都运行良好，彼此没有冲突。他们也得到 jQuery。因此，同位素部分在投资组合页面中工作正常，没有错误，但在同位素容器不存在的其他页面中显示错误。即使使用 document.ready 包装器，它也会显示该错误。

//portfolio page isotope code
$(document).ready(function(){
    var container = $('#portfolio-holder');
    container.imagesLoaded( function(){
        container.isotope({
            itemSelector    : '.portfolio-item',
            layoutMode      : 'fitRows',
            animationEngine : 'jquery'
        });
        /* ---- Filtering ----- */
        $('#portfolio-filter li').click(function(){
            var $this = $(this);
            if ( $this.hasClass('selected') ) {
                return false;
            } else {
                $('#portfolio-filter .selected').removeClass('selected');
                var filterValue = $(this).attr('data-filter');
                container.isotope({ filter: filterValue });
                $this.addClass('selected');
                return false;
            }
        });
    });
});

错误是：

Uncaught TypeError: undefined is not a function

错误指向：

container.imagesLoaded( function(){

同样的问题发生在我的另一个项目中，它显示 flexslider 错误。然后我将插件代码分离到另一个文件并仅加载特定于滑块所在页面的文件。

但是，如果 DOM 不存在，我如何从一个没有冲突且没有错误的文件中加载我的所有 javascript？

Answer 1

调用前简单检查容器和函数是否存在：

$(document).ready(function(){
    var container = $('#portfolio-holder');

    if (typeof container.imagesLoaded == 'function' && container.length > 0) { 

        container.imagesLoaded( function(){
            container.isotope({
                itemSelector    : '.portfolio-item',
                layoutMode      : 'fitRows',
                animationEngine : 'jquery'
            });
            /* ---- Filtering ----- */
            $('#portfolio-filter li').click(function(){
                var $this = $(this);
                if ( $this.hasClass('selected') ) {
                    return false;
                } else {
                    $('#portfolio-filter .selected').removeClass('selected');
                    var filterValue = $(this).attr('data-filter');
                    container.isotope({ filter: filterValue });
                    $this.addClass('selected');
                    return false;
                }
            });

        });

    }

});