Swipe event propagation with nested div doesn't work

Question

Hi I've the following html structure:

<div class="container">

        <div class="scroller">
            <div id ="goldenPage" class="page active">              
                <div class="block text">
                    <div class="rich-text"></div>
                </div>
                <div class="block">
                    <div class="form"></div>
                </div>
                <div class="block">
                    <ul class="menu"></ul>
                </div>
            </div>
            <div id ="cachePage" class="page"></div>
        </div>

    </div>

If I bind a swipe event on div with class container using code

var myElement = $(".container")[0];
            var hammertime = new Hammer(myElement);             
            hammertime.on("swiperight",function(){
                console.debug(" manage swiperight event.");                 
                });

and if I swipe nothing happen (except if I swipe on the bottom of my page because the internal div with scroller class is fewer height than parent div). If I bind the swipe on div with class scroller the swipe is correctly binded. The scroller div is binded with jquery scrollpane plugin. Any ideas?!

Answer 1

DEMO — Make sure your JavaScript/jQuery is fired after the document.ready event.

If the JavaScript fires before the element is available in the DOM, your JavaScript will not find the element, and thus be unable to bind the (swiperight) event to the element.

Using jQuery, this can be achieved by wrapping your JavaScript code in:

$(function() {
    // Your code here.
    console.log("Ready!");
});