Question

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

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

为什么新元素不会从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');
            }
        }
    });


});

Answer 1

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

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

例如，

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

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

<强>更新

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

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

Answer 2

尝试：

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

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

jquery .on（）没有绑定到jquerymobile changePage中的新元素

2 个答案: