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

我不想将此代码放在每个视图中。无论当前显示什么模板，我在哪里可以放置此代码以便始终执行？目前我将它放在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创建了click事件，所以它只会注册已经渲染元素的click事件。您可以使用以下命令将事件应用于所有元素，包括直到稍后才会呈现给DOM的元素：

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

请参阅http://api.jquery.com/on/

Answer 2

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

Backbone中的全局点击事件

2 个答案: