Event does not trigger on the initial load

问题

This is a continuation from my other question regarding Changing media screen makes div overlay

This problem is associated with Isotope. With help from @Robin Carlo Catacutan I have the following 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 class when transition is finished
  $container.on( 'arrangeComplete', function( event, filteredItems ) {
    $(".grid figure img").addClass("imgArranged");
  });

  $container.on( 'arrangeComplete',
  function( event, filteredItems ) {
    console.log( 'Isotope arrange completed on ' +
      filteredItems.length + ' items' );
  }
);

  //Add the class selected to the item that is clicked, and remove from the others
  var $optionSets = $('#filters,#filters-undercat'),
    $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;
  });

});

I want you to focus on the section where it's supposed to add class when transition is finished:

  $container.on( 'arrangeComplete', function( event, filteredItems ) {
    $(".grid figure img").addClass("imgArranged");
  });

According to @Robin Carlo Catacutan there is a problem with arrangeComplete. The event arrangeComplete doesn't trigger on the initial load of the page.

The isotope is being loaded in the beginning of functions.php:

//Isotope
function add_isotope() {
    wp_register_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js', array('jquery'),  true );
    wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'),  true );
    wp_enqueue_script('isotope-init');
}

add_action( 'wp_enqueue_scripts', 'add_isotope' );

I post all my php within the latest posts in case you find anything suspicious:

<?php 

$args = array(
    'post_type' => (array( 'foto', 'video', 'web' )),
    'posts_per_page' => '-1',
    'post_taxonomy' => 'any',
);

$the_query = new WP_Query($args); 

?>
<?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");
            $termsString = "";
                foreach ( $termsArray as $term ) { 
                    $termsString .= $term->slug.' ';
                }
        ?>               
        <div class="<?php echo $termsString; ?> item col-md-4"> 
            <div class="content grid lefttext">
                <figure class="effect-lily">
                    <?php if ( has_post_thumbnail() ) { the_post_thumbnail('frontpage_thumb'); } ?>
                    <figcaption>
                        <div>
                            <h2 class="uppercase regular whitetext textshadow nomarginbottom"><?php the_title(); ?></h2>
                            <p><span class="whitetext thin textshadow"><?php echo(types_render_field( "produkt", array( 'raw' => true) )); ?> / <?php echo(types_render_field( "produsert", array( 'raw' => true) )); ?></span></p>
                        </div>
                        <a href="<?php the_permalink() ?>" rel="bookmark" class="smoothtrans">Se prosjekt</a>
                    </figcaption>           
                </figure>     
            </div> 
        </div>
        <?php endwhile;  ?>
    </div>
<?php endif; ?>

However, this is the most important part which is directly related to the question:

<div class="<?php echo $termsString; ?> item col-md-4"> 
     <div class="content grid lefttext">
          <figure class="effect-lily">
          <?php if ( has_post_thumbnail() ) { the_post_thumbnail('frontpage_thumb'); } ?>
              <figcaption>
                  <div>
                       <h2 class="uppercase regular whitetext textshadow nomarginbottom"><?php the_title(); ?></h2>
                       <p><span class="whitetext thin textshadow"><?php echo(types_render_field( "produkt", array( 'raw' => true) )); ?> / <?php echo(types_render_field( "produsert", array( 'raw' => true) )); ?></span></p>
                  </div>
                  <a href="<?php the_permalink() ?>" rel="bookmark" class="smoothtrans">Se prosjekt</a>
               </figcaption>            
          </figure>     
     </div> 
</div>

Not sure if relevant, but as summary of what I am using related to this problem:

Wordpress
Isotope
Bootstrap

What I have tried:

Changing the order of where the isotope.js is being loaded. Tried including it in the header, right before the closing of body tag and so on.
Searching online for a similiar problem (not found)
Renaming $container to $grid
Changing what element the addClass is going to affect

The page can be found here.

Do you have a working solution or any ideas?

Streched images on Android Landscape:

回答1:

One thing you should try (and this is related to your first question as well), since your loading images, is to use imagesloaded.js. This will allow all images to load before isotope is initiated which will eliminate overlaps See here. I'm not understanding why do you need to add the class "imgArranged" using javascript if it is in a @media query?

var $container = $('#isotope-list'); //The ID for the list with all the blog posts

 $container.imagesLoaded( function() {
 $container.isotope({ //Isotope options, 'item' matches the class in the PHP
 itemSelector: '.item',
 layoutMode: 'masonry'
 });
 });

ADENDUM

The problem is you are loading jQuery twice, 2 different versions. You need to pick one. If you pick 2.1.4, you don't use query-migrate

This loads first:

 <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/jquery-2.1.4.min.js"></script>    
  <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/collection.js"></script>
  <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/less.js"></script>
  <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/imagesloaded.js"></script>
  <script src="//use.typekit.net/xti5sne.js"></script>

This loads after:

<script type='text/javascript' src='http://www.vekvemedia.no/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://www.vekvemedia.no/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/isotope.pkgd.min.js?ver=1'></script>
<script type='text/javascript' src='http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/isotope.js?ver=1'></script>

来源：https://stackoverflow.com/questions/31624836/event-does-not-trigger-on-the-initial-load

标签

javascript

php

jquery

twitter-bootstrap

jquery-isotope