Jquery Mobile Swipe not work when page has some childs

Question

I want to use jquery mobile swipe for my mobile application, I use following code:

    $(document).on('pageinit', function () {
    $('img').on('dragstart', function (event) { event.preventDefault(); });
    function navnext(next) {
        //$(":mobile-pagecontainer").pagecontainer("change", next + ".html", {
        //    transition: "slide"
        //});
        $.mobile.changePage(next + ".html", { transition: "slide" });
    }

    // Handler for navigating to the previous page
    function navprev(prev) {
        //$(":mobile-pagecontainer").pagecontainer("change", prev + ".html", {
        //    transition: "slide"
        //});
        $.mobile.changePage(prev + ".html", { transition: "slide" });
    }

    // Navigate to the next page on swipeleft
    $(document).on("swipeleft", ".ui-page *", function (event) {
        // Get the filename of the next page. We stored that in the data-next
        // attribute in the original markup.
        var next = $(this).jqmData("next");

        // Check if there is a next page and
        // swipes may also happen when the user highlights text, so ignore those.
        // We're only interested in swipes on the page.
        if (next) {
            navnext(next);
        }
    });
    $(document).on("swiperight", ".ui-page *", function (event) {
        var prev = $(this).jqmData("prev");

        if (prev) {
            navprev(prev);
        }
    });

});

my code is work fine when page is empty and has no child. but when I add some content and image too my page it doesn't work. why? and how can I fix this bug?

here is my html code :

 

    
        
        
        

        
        
        
            
                
                    home
                    Relay
                
            

        

        
            
                
                    
                        Connected
                        
                    
                
                
                    
                        221 V
                    
                
            
            
                
            
        
        
            
                
                    
                    
                    

                    رله شماره 1 - آشپزخانه
                    
                
            
            
                
                    
                    
                    
                    رله شماره 1 - آشپزخانه
                    
                
            
            
                
                    
                    
                    
                    رله شماره 1 - آشپزخانه
                    
                
            
            
                
                    
                    
                    
                    رله شماره 1 - آشپزخانه
                    
                
            
            
                
                    
                    
                    
                    رله شماره 1 - آشپزخانه

ezanker · Accepted Answer

Change ".ui-page *" to ".ui-page".

Including the * means that $(this) is the child element and therefore does not have data-next/data-prev.

Either that or change the code in the handler to

$(this).closest('.ui-page').jqmData("next");

Jquery Mobile Swipe not work when page has some childs

Answers (1)

Related Questions