Uncaught TypeError - Не функция - Нет визуально ошибки

Question

Пожалуйста, прочтите, прежде чем судить

Да, я полностью в курсе нижнего названия для моего вопроса. Однако я не могу изменить его на то, что имеет более объясняющий заголовок. Поэтому, если у вас есть рабочее название, пожалуйста, дайте мне знать.

Хорошо, тогда мы идем к этому вопросу. Я использую изотоп для этой конкретной части и получаю эту досадную ошибку с помощью Chrome Developer. Я не вижу ошибок, которые могут быть связаны с этой проблемой, но поскольку это ошибка, мне нужно ее исправить (одержимость).

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, как # изотопа список. Я искал в Интернете несколько раз для рабочих решений, но я не могу найти их. В одном сообщении говорилось, что это связано с Bootstrap. После обновления до Bootstrap я все еще вижу проблему, поэтому считаю, что ошибок в Bootstrap нет. Тем не менее, может быть проблема связи между Boostrap и Изотоп о следующем:

$container 

Может быть, это происходит сбой с чем-то из Bootstrap в качестве контейнера используется несколько раз на моем сайте.

Подводя итог:

• Ошибка отображается в Chrome Developer
• Нет визуально ошибки
• Использование Wordpress, Изотоп и Bootstrap
• Page можно найти here

Знаете ли вы какие-либо рабочие решения или идеи? Пожалуйста, дайте мне знать.

Я действительно рекомендую проверить ссылку, чтобы искать решение, как это может быть заражен с другими JS я не писал здесь.

Answer 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, при одновременном снижении риска " странные "/" случайные "ошибки (т. е. человеческие ошибки)

Answer 2

Насколько я могу судить, b.isotope Фактически это правильное имя функции, потому что оно было уменьшено (см. Isotope.js). Убедитесь в том, чтобы включить изотоп-плагин, прежде чем пытаться связать его с вашим HTML-элементов

EDIT: Вы пробовали обернуть свой код в isotope.js в

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

?