0

我正在用 phonegap、backbone.js 和 require.js 构建一个应用程序。每个模板都有相同的导航菜单，并且模板中的每个标题都有一个用于滑入和滑出菜单的按钮。菜单显示如下代码：

$('#slide-menu-button').on("click", function (e) {
                var cl = document.body.classList;
                if (cl.contains('left-nav')) {
                    cl.remove('left-nav');
                } else {
                    cl.add('left-nav');
                }
    });

我不想把这段代码放在每个视图中。无论当前显示什么模板，我可以将这段代码放在哪里，以便它始终执行？目前我把它放在 app.js 中，看起来像：

require.config({

    baseUrl: 'js/lib',

    paths: {
    app: '../app',
    tpl: '../tpl'
    },

    shim: {
    'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    },
    'underscore': {
        exports: '_'
    }
    }
});

require(['jquery', 'backbone', 'app/router'], function ($, Backbone, Router) {

    var router = new Router();

    $("body").on("click", ".back-button", function (event) {
    event.preventDefault();
    window.history.back();
    });

    Backbone.history.start();

    $('#slide-menu-button').on("click", function (e) {

                var cl = document.body.classList;
                if (cl.contains('left-nav')) {
                    cl.remove('left-nav');
                } else {
                    cl.add('left-nav');
                }
    });

});

但是，这仅适用于加载的第一个模板，而不适用于任何其他后续模板...

4

2 回答 2

1

看起来您正在为页面加载时为#slide-menu-button 创建点击事件，因此它只会注册带有已渲染元素的点击事件。您可以使用以下内容将事件应用于所有元素，包括那些直到稍后才会呈现到 DOM 的元素：

$( "body" ).on( "click", "#slide-menu-button", function( event ) {
    event.preventDefault();
    window.history.back();
});

见http://api.jquery.com/on/

于 2013-11-06T15:08:57.860 回答
1

Backbone 应该与此类事件无关。您可以将侦听器绑定到<body>元素，然后向其添加选择器。有关更多信息，请参阅 jQuery 文档：http: //api.jquery.com/on/

$('body').on("click", "#slide-menu-button", function (e) {

    var cl = document.body.classList;

    if (cl.contains('left-nav')) {
        cl.remove('left-nav');
    } else {
        cl.add('left-nav');
    }
});
于 2013-11-06T15:15:09.720 回答