0

我有 2 个页面使用相同的模板。唯一不同的data-role="content"就是不同。我正在使用$.mobile.changePage('page2.php');，但all.js我脑海中的文件没有绑定到page2.

'all.js' 的脚本标签位于两个页面的头部，从我读过的内容来看，只有data-role="page"从第二页加载。这很好，因为.on()绑定应该绑定到新元素，但事实并非如此。如果我专门刷新，page2.php则该all.js文件可以工作，但是如果我使用changePage它则不会。

为什么没有从changePage绑定到all.js .on()选择器中拉入新元素？

两个页面的 HTML

<!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');
            }
        }
    });


});
4

2 回答 2

8

.on不是简单的替换.live，你需要使用正确的语法。

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

例如，

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

要直接匹配.live正在做的事情，请使用document代替'#someparentelement'

更新

问题的根源是 .ui-collapsible-heading 上的 click 事件被 JQM 停止，这意味着它不能冒泡到文档。剩下的处理事件的唯一方法是将其直接绑定到该元素上而无需委托。

考虑到这一点，您需要它在每个页面上运行，因此您需要删除它，$(function(){})因为它只在第一页上运行，而是使用$(document).on("pageinit",function(){})

于 2012-10-16T18:00:30.607 回答
0

尝试：

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

'Live' 的工作方式类似于 'on'，但将事件设置为新元素。

于 2012-10-16T18:08:18.163 回答