javascript - Backbone 中的全局点击事件

Question

我正在使用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');
                }
    });

我不想将此代码放入每个 View 中。我可以将该代码放在哪里，以便无论当前显示什么模板，它始终都会执行？目前我将它放在 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');
                }
    });

});

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

Answer 1

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

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

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