jQuery event wont' work after Ajax Loads in jQuery Mobile

Question

I'm still new to Jquery Mobile and definitely it's a great framework.

I hope someone could help me. I'm having issues with jquery events after ajax page loading.

The following code will work on first page load, but after visiting other pages it won't work.

JS

   jQuery("#menu").tap(function () {
        jQuery("ul.sub-menu").slideToggle("slow");
    });

HTML

<input type="button" id="menu" value="Menu" data-icon="arrow-d"/>
<ul class="sub-menu" data-role="listview">     
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
</ul>      

I've tried using pageinit() and pageshow() but still it won't work.

Any help would be greatly appreciated.

Code in my header.php in worpdress:

    <div data-role="page" id="indexPage" class="blog page">

    <script type="text/javascript"> 

        jQuery("div:jqmData(role='page'):last").bind('pageshow', function(){
              //your code here - $.mobile.activePage works now
            jQuery.mobile.activePage.on('tap', '.menu', function(){
                alert('test');
                jQuery.mobile.activePage.find('ul.sub-menu').slideToggle('slow');
            });
        });

    </script>


        <?php
        //Get data theme from theme options

        $options = get_option('touch_theme_options');
        $theme = $options['color_option'];

        ?>

        <div id="logo">
            <a href="<?php echo home_url(); ?>"><img src="<?php bloginfo('url'); ?>/wp-content/themes/converse/images/sofrep-logo-mobile.png" alt="<?php bloginfo('title'); ?>"></a>
        </div>

        <div data-theme="<?php echo $theme ?>">
            <input type="button" id="menu" class="menu" value="Menu" data-icon="arrow-d"/>
            <ul class="sub-menu" data-role="listview">     
                <li><a href="#">Link 1</a></li>              
                <li><a href="#">Link 2</a></li>         
                <li><a href="#">Link 3</a></li>     
            </ul>
        </div>

Answer 1

A bit of background info is necessary here, jQuery loads pages via AJAX and inserts it IN THE SAME HTML PAGE, the only code it pulls in from the 2nd page is anything between the div[data-role="page"] which means if you have JS in the there it won't get pulled in.

You were originally referencing a DOM element by an ID and binding it, this doesn't really work, since jQM loads multiple pages into one html page, you can potentially have more than one element with the same id, what you need is a reference to the current page, which is $.mobile.activePage which is available after pageshow

I see in your comments that you used the live event, this is a step in the right direction, but if that code runs more than once, it will bind multiple live events, that's why you are getting 3 slides.

The solution is to use the jQuery on event handler to bind live event listeners at the root div page not the document, and listen for #menu

jQuery("div:jqmData(role='page'):last").bind('pageinit', function(){
    $(this).on('tap', '#menu', function(){
         $(this).find('ul.sub-menu').slideToggle('slow');
    });
});

You will need to run this code within the pageinit event handler of jQM, see below links

There's a similar question here: https://stackoverflow.com/a/9200797/737023, I have a more thorough solution on a good way to bind events without conflicts in jQM here: Jquerymobile - $.mobile.changepage