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

Posted 2023-05-08

技术标签:

【中文标题】未捕获的 TypeError - 不是函数 - 没有视觉错误【英文标题】：Uncaught TypeError - Not a function - No visually errors 【发布时间】：2015-09-27 15:08:06 【问题描述】：

判断前请阅读

是的，我完全知道我的问题的低级标题。但是，我无法将其更改为具有更多解释性标题的内容。所以如果你有工作头衔，请告诉我。

好的，那我们来回答这个问题。我在这个部分使用同位素，并在 Chrome 开发人员中遇到了这个烦人的错误。我看不到任何与此问题相关的错误，但由于这是一个错误，我需要修复它（痴迷）。

Uncaught TypeError: b.isotope is not a function

我正在为我的网站使用以下代码：

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; ?>

该网站可以找到here。

我已尝试查找它，但正如我所见，它没有理由将 b.isotope 变成 #isotope-list。我已经在网上搜索了几次有效的解决方案，但我找不到任何解决方案。一篇帖子说它与 Bootstrap 有关。更新到 Bootstrap 后，我仍然看到问题，所以我相信 Bootstrap 没有错误。但是，Boostrap 和 Isotope 之间可能存在以下连接问题：

$container

也许这与 Bootstrap 中的某些内容有关，因为容器在我的网站上多次使用。

总结一下：

Chrome 开发者中显示错误没有视觉错误使用 Wordpress、Isotope 和 Bootstrap 页面可以找到here

您知道任何可行的解决方案或想法吗？请告诉我。

我真的建议查看链接以寻找解决方案，因为它可能感染了我没有在此处发布的其他 js。

【问题讨论】：

同位素是否在其他页面中起作用？看起来它没有正确安装，所以您的 jquery 对象没有它作为可用功能。您的脚本包含的顺序是什么？ - 您能否发布您的 <head> 的相关部分（或插入脚本的任何位置 - 也可能靠近结束 </body> 标签）？ http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/isotope.js 被包含两次...看起来您没有包含使用 correct methods 的脚本还包含两次 JQuery。请注意，WordPress 也可以自动提供 JQuery。很抱歉没有在您发表评论的同时回复。我没想到会有这样的参与。谢谢。我会尝试你的想法并回复你。 【参考方案1】：

问题原来是isotype.js被包含了两次。

为避免这种情况，应始终以 wordpress 提供/打算包含脚本的方式包含脚本。这确保了脚本不会被多次包含，同时提供了一种方便的方式来添加脚本之间的依赖关系，确保它们以正确的顺序包含。

从不自己写<script src="[whatever]"></script>标签（这是从不唯一的方法）。

总是包含使用 wordpress 函数 wp_enqueue_script() (codex) 或的脚本，如果它们本身没有价值（如 jQuery），只需使用wp_register_script() (codex) 注册它们，以便其他脚本可以依赖它们。

最好仅在 wp_enqueue_scripts 挂钩 (codex) 中包含脚本。

正确包含具有依赖关系的脚本的示例：

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' );

始终以正确的方式做事将显着提高与第三方插件和未来版本的 wordpress 的兼容性，同时降低“奇怪”/“随机”错误（即人为错误）的风险

【讨论】：

【参考方案2】：

据我所知，b.isotope 实际上是函数的正确名称，因为它已被缩小（参见 isotope.js）。在尝试将其绑定到 html 元素之前，请确保包含同位素插件

编辑：您是否尝试将代码包装在isotope.js 中

$(document).ready(function() 
     [...] your code [...]
);

【讨论】：

以上是关于未捕获的 TypeError - 不是函数 - 没有视觉错误的主要内容，如果未能解决你的问题，请参考以下文章

未捕获的 TypeError：Vue.elementDirective 不是函数

未捕获的 Promise 错误：TypeError：成员不是函数

未捕获的 TypeError：this.getExtraNgModuleProviders 不是函数

未捕获的 TypeError：Object(...)(...).Class 不是函数

Angular：错误：未捕获（承诺）：TypeError：Object（...）不是函数

未捕获的 TypeError: $(...).tooltip 不是函数错误