此选择器具有多个元素错误

Question

I keep getting the error TurnJsError: This selector has more than 1 element i have made a few checks in Firebug and i know that my Jquery is being loaded as are all my libraries/scripts i need.

The error appears after my page has loaded, if i add the following part of my javascript to the console and run it before the page has fully loaded then its ok but still returns the same error as above, however if i let the page load (get the error from above again) and then run that script in console i get another error TypeError: Argument 1 of Node.insertBefore does not implement interface Node. :

function loadApp() {

// Create the flipbook

$('.flipbook').turn({
        // Width

        width:922,

        // Height

        height:600,

        // Elevation

        elevation: 50,

        // Enable gradients

        gradients: true,

        // Auto center this flipbook

        autoCenter: true

}); 
}
// Load the HTML4 version if there's not CSS transform  
$(document).ready(function() {
yepnope({
test : Modernizr.csstransforms,
yep: ['../../lib/turn.js'],
nope: ['../../lib/turn.html4.min.js'],
both: ['css/basic.css'],
complete: loadApp
});
});

Could i be missing something thats the cause for throwing these errors?

when i add .first() so its like $('.flipbook').first().turn({ after the page has fully loaded i get slight movement in my image, but still getting the error TypeError: Argument 1 of Node.insertBefore does not implement interface Node. When i click on my image it dissapears but the next image is not displayed instead i get another error TypeError: c is null

Answer 1

turn.js work with a single element. Use the .each function.

$('.flipbook').each(function(){
    $(this).turn(...);
})

Note that turn may need a unique id on the container.