Question

我正在使用Backbone和Jquery。我在模板中有一个按钮，由于某种原因，该按钮不会触发任何click事件。我已经在stackoverflow尝试了所有建议的解决方案，但它们都没有为我工作。以下是我正在使用的代码 - 我已尽可能缩短。

为什么YES按钮不起作用的任何想法？

EditView.html

<section id="EditView">
    <button id="button-yes">YES</button>
</section>

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

</head>

<body>
    <header id="header"></header>

    <div id="content"><div id="content-inner"></div></div>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://underscorejs.org/underscore-min.js"></script>
    <script src="http://backbonejs.org/backbone-min.js"></script>

     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">      </script>

    <script type="text/javascript">
    var myapp =  myapp || {};

 myapp.EditView = Backbone.View.extend({

events: {
    'click #button-yes': 'buttonClickHandler'
 },

initialize: function () {
    this.render();
},

render: function () {
    this.$el.html(this.template());                                  

    return this;    // support chaining
},

buttonClickHandler : function(event){
    alert( $(event.currentTarget).text() );
    return false;
}

 });


     myapp.utils = {

loadTemplates: function(views, callback) {

    var deferreds = [];

    $.each(views, function(index, view) {
        if (myapp[view]) {
            deferreds.push($.get(view + '.html', function(data) {
                myapp[view].prototype.template = _.template(data);
            }));
        } else {
            console.log(view + " not found");
        }
    });

    $.when.apply(null, deferreds).done(callback);
}
 };


    myapp.AppRouter = Backbone.Router.extend({

routes: {
    "": "add"
        },

initialize: function() {
    this.add;
},

add: function() {
    if (!this.editView) {
        this.editView = new myapp.EditView({el: $("#content-inner")});
    };
    $('#content').html(this.editView.el);
}
 });

myapp.utils.loadTemplates([ 'EditView'], function() {
myapp.router = new myapp.AppRouter();
Backbone.history.start();
});


 </script>
</body>
 </html>

Answer 1

我不完全确定你为什么遇到问题，似乎是一些竞争条件，当骨干试图将事件绑定到它时，该元素不存在。这是一个有趣的案例。无论如何，您现在可以通过添加

来解决它

myapp.router.editView.delegateEvents();

在Backbone.history.start（）;

之后

主干事件不是由按钮触发的

EditView.html

的index.html

1 个答案: