CODEWITHSUNDEEP
jqueryjquery-mobile
Bot
Bot

Reputation: 11855

jquery .on() not binding to new elements from jquerymobile changePage

I have 2 pages that use the same template. The only thing different is the data-role="content" is different. I am using $.mobile.changePage('page2.php'); but the all.js file that I have in my head is not binding to the elements loaded in page2.

The script tag for 'all.js' is in the head of both pages and from what I have read, only the data-role="page" is loaded from the second page. Which is fine because the .on() bind should be binding to the new elements, however it isn't. If I specifically refresh page2.php then the all.js file works, however if I use changePage it will not.

Why aren't the new elements pulled in from changePage binding to all.js .on() selector?

HTML for both pages

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">

    <title>Title</title>

    <link rel="stylesheet" href="css/themes/default/jquery.mobile.theme-1.2.0.min.css">
    <link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.2.0.min.css">

    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/pages/all.js"></script>
</head>

<body>
<div data-role="page" data-theme="d">
    <div data-id="head" data-role="header" data-position="fixed" data-theme="b">
        <h1>Name</h1>
        <a href="#" id="headingsActionButton" class="ui-btn-right headingsActionButton hidden" data-role="button" data-inline="true" data-icon="check">Save</a>

    </div>

    <div id="mainContent" data-role="content">
        {PageContent}
    </div>
    <div align="center" data-id="foot" data-role="footer" data-position="fixed" data-inset="false" data-theme="c">
        Powered by 
    </div>
</div>
</body>
</html>

all.js

$(function() {
    /**
     * Prevent the header and footer from hiding on a non element tap.
     */
    $("[data-role=header], [data-role=footer]").fixedtoolbar({ tapToggle: false });

    /**
     * Scroll to the top of the collapsible heading
     */
    $('.ui-collapsible-heading').on('click', function(e) {
        window.scrollTo(0, $(this).offset().top - $('[data-role=header]').height());
        $('.headingsActionButton').addClass('hidden');
        var attr = $(this).parent().attr('data-action-id');
        if (typeof attr !== 'undefined' && attr !== false) {
            if (!$(this).parent().hasClass('ui-collapsible-collapsed')) {
                console.log('expanded');
                $('.headingsActionButton').attr('data-action-id', $(this).parent().attr('data-action-id'));
                $('.headingsActionButton .ui-btn-text').text($(this).parent().attr('data-action-text'));
                $('.headingsActionButton').toggleClass('hidden');
            } else {
                console.log('collapsed');
            }
        }
    });


});

Upvotes: 0

Views: 772

Answers (2)

Kevin B
Kevin B

Reputation: 95020

.on is not a simple drop in to replace .live, you need to use the correct syntax.

$(context).on(events,targetelements,eventhandler)

For example,

$('#someparentelement').on('click','.ui-collapsible-heading',function(){...});

To directly match what .live was doing, use document in place of '#someparentelement'

Update

The root of the problem is the click event on .ui-collapsible-heading is being stopped by JQM, meaning it can't bubble up to the document. That leaves the only way to handle the event is binding it directly on that element without delegation.

With that in mind, you'll need it to run on every page, so you need to remove $(function(){}) since it only runs on the first page and instead use $(document).on("pageinit",function(){})

Upvotes: 8

Nahuelistico
Nahuelistico

Reputation: 1

Try:

$('.ui-collapsible-heading').live('click', function(e) { ... });

'Live' works like 'on', but set the event to new elements.

Upvotes: 0

Related Questions