未捕获的TypeError - 不是函数 - 没有视觉错误

Question

Please read before judging

Yes, I am fully aware of the inferior title for my question. However, I am not able to change it to something that has a more explaining title. So if you have a working title, please let me know.

Okay, then we go for the question. I am using isotope for this particualary part, and get this annoying error with Chrome Developer. I can't see any errors that can be related to this problem, but since this is an error I need to fix it (obsession).

Uncaught TypeError: b.isotope is not a function

I am using the following code for my website:

Isotope.js

jQuery(function ($) {

    var $container = $('#isotope-list'); //The ID for the list with all the blog posts
    $container.isotope({ //Isotope options, 'item' matches the class in the PHP
        itemSelector : '.item', 
        layoutMode : 'masonry'
    });

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });

    return false;
    });

});

PHP

<?php if ( $the_query->have_posts() ) : ?>
    <div id="isotope-list">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 

        $termsArray = get_the_terms( $post->ID, "category");  //Get the terms for this particular item
        $termsString = ""; //initialize the string that will contain the terms
            foreach ( $termsArray as $term ) { // for each term 
                $termsString .= $term->slug.' '; //create a string that has all the slugs 
            }
        ?> 
        <div class="<?php echo $termsString; ?> item col-md-4"> 
            <ul class="grid cs-style-3">
                <li>
                    <figure>
                        <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
                        <?php if ( has_post_thumbnail() ) { 
                              the_post_thumbnail('frontpage_thumb');
                        } ?>
                        <figcaption class="lefttext">
                            <h3><?php the_title(); ?></h3>
                            <span class="offgrey"><?php echo(types_render_field( "produkt", array( 'raw' => true) )); ?> / <?php echo(types_render_field( "produsert", array( 'raw' => true) )); ?></span>
                            <a href="<?php the_permalink() ?>" rel="bookmark" class="smoothtrans">Se prosjekt</a>
                        </figcaption>
                    </figure>
                </li>
            </ul>             
        </div> <!-- end item -->
        <?php endwhile;  ?>
    </div> <!-- end isotope-list -->
    <script src="<?php bloginfo('stylesheet_directory'); ?>/js/toucheffects.js"></script>
<?php endif; ?>

The website can be found here.

I have tried looking it up, but as I can see there are no reason it's becoming b.isotope as #isotope-list. I have searched online several times for working solutions, but I can't find any. One post said it had something to do with Bootstrap. After updating to the Bootstrap I still see the issue, so I believe there are no errors with Bootstrap. However, there could be a connection issue between Boostrap and Isotope about the following:

$container

Maybe this is crashing with something from Bootstrap as container is used several times on my website.

To sum it up:

• Error is shown in Chrome Developer
• No visually errors
• Using Wordpress, Isotope and Bootstrap
• Page can be found here

Do you know any working solutions or ideas? Please let me know.

I really recommend checking out the link to look for the solution as it could be infected with the other js I haven't posted here.

Answer 1

The problem turned out to be that isotype.js was included twice.

To avoid this situation one should always include scripts the way wordpress provides / intends scripts to be included. This ensures that scripts are never included more than once, and at the same time offers a convenient way to add dependencies between scripts, ensuring that these are included in the correct order.

• Never write a <script src="[whatever]"></script> tag yourself (it is never the only way).

• Always include scripts using the wordpress function wp_enqueue_script() (codex) or if they have no value on their own (like jQuery), just register them using wp_register_script() (codex), so they are available for other scripts to depend on.

• Preferably include scripts only in the wp_enqueue_scripts hook (codex).

Example of correct inclusion of scripts that have dependencies:

function theme_name_scripts() {
    /**
     * isotope.js requires jQuery - wordpress will automatically make
     * sure jQuery is included _before_ isotope.js
     * Note that jquery does not need to be registered or enqueued
     * manually, as it is one of many standard scripts included with
     * wordpress... But the dependency should be specified explicitly
     * using the third parameter of wp_register_script() or
     * wp_enqueue_script()
     */
    wp_register_script( 'isotope', get_template_directory_uri() . '/js/isotope.js', array('jquery'), '1.0.0' );

    /**
     * my_theme.js requires both jQuery and isotype.js (referred to by
     * the script ID - first parameter of wp_register_script call above)
     * wordpress will automatically make sure isotype.js is included
     * _before_ my_theme.js - and when including isotype.js it will
     * notice that that depends on jQuery and make sure to also include
     * that.
     * Note that wordpress handles this even if this call is made before
     * registering or enqueuing isotope.js
     */
    wp_enqueue_script( 'my_theme', get_template_directory_uri() . '/js/my_theme.js', array('isotope'), '0.1.0' );
}

//Hook in to the appropriate hook to run the function:
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Always doing things the right way will increase compatibility with third party plugins and future versions of wordpress significantly, while reducing the risk of "strange" / "random" bugs (ie. human error)