jquery - 无法识别书签功能

Question

我正在尝试让 wookmarks 在页面的一部分上工作以显示产品。我已经通过wp_enqueue_script加载了wookmarks和loadedimages。它们包含在 header 源中，因此看起来加载得很好。但是，我在 firebug 中遇到了一个我无法解决的错误。该代码取自 wookmarks 的示例文件。

TypeError: handler.wookmark is not a function

页面.php

<div id="products" class="fp-sec">
<h2>Products</h2>
<ul id="prod-list" >
    <?php $products = new WP_Query( 'category_name=products' ); ?>
    <?php if ( $products->have_posts() ) : while ( $products->have_posts() ) : $products->the_post(); ?>
        <li <?php post_class('fp-prod') ?> id="post-<?php the_ID(); ?>">
            <?php the_post_thumbnail('full'); ?>
                <p class="prod-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
        </li>
    <?php endwhile; endif;?>
</ul>
</div>

<script type="text/javascript">
jQuery(document).ready(function ($) {
var loadedImages = 0, // Counter for loaded images
handler = $('#prod-list li'); // Get a reference to your grid items.
// Prepare layout options.
var options = {
    autoResize: true, // This will auto-update the layout when the browser window is resized.
    container: $('#prod-list'), // Optional, used for some extra CSS styling
    offset: 5, // Optional, the distance between grid items
    outerOffset: 10, // Optional, the distance to the containers border
    itemWidth: 210 // Optional, the width of a grid item
};
$('#prod-list').imagesLoaded(function() {
// Call the layout function.
handler.wookmark(options);
// Capture clicks on grid items.
handler.click(function(){
    // Randomize the height of the clicked item.
    var newHeight = $('img', this).height() + Math.round(Math.random() * 300 + 30);
    $(this).css('height', newHeight+'px');
    // Update the layout.
    handler.wookmark();
});
}).progress(function(instance, image) {
// Update progress bar after each image load
loadedImages++;
if (loadedImages == handler.length)
    $('.progress-bar').hide();
else
    $('.progress-bar').width((loadedImages / handler.length * 100) + '%');
});
});
</script>

样式.css

#prod-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
#prod-list li {
    width: 200px;
    border-left: 1px dashed #bfbfbf;
    border-top: 1px dashed #bfbfbf;
    -webkit-box-shadow: 2px 3px 3px 0px rgba(105,105,105,1);
    -moz-box-shadow: 2px 3px 3px 0px rgba(105,105,105,1);
    box-shadow: 2px 3px 3px 0px rgba(105,105,105,1);
    cursor: pointer;
    padding: 4px;
}
#prod-list li img {
    display: block;
    max-width: 100%;
    height: auto;
}

.prod-title {
    font-size: 1.2em;
    width: auto;
    color: #ffffff;
    padding: 0px;
    bottom: 0px ;
    right: 0px;
}

Answer 1

看起来像这一行:

handler = $('#prod-list li'); // Get a reference to your grid items.

应该是(实际网格项的直接父级):

handler = $('#prod-list'); // Get a reference to your grid items.

然后这一行:

container: $('#prod-list'), // Optional, used for some extra CSS styling

将是(...又是其直接父级):

container: $('#products'), // Optional, used for some extra CSS styling

引用网格项会直接导致此错误。