在ribs.js中添加兩個事件

Question

我添加了兩個jQuery事件，第二個jQuery事件未觸發。 可能是什么問題？ 這是我的代碼：

var ListView = Backbone.View.extend({

            events: function() {
                $('#couponcheck2').click(function(e) {
                        e.preventDefault();
                        $('#couponcheck').empty();
                        $('#couponcheck').append('<div class="col-xs-8"><input type="text" class="form-control" id="enterCoupon"></div>');
                        $('#couponcheck').append('<div class="col-xs-8"><button type="button" class="btn btn-success btn-sm" id="couponbutton"><span class="glyphicon glyphicon-ok"></span> Apply</button></div>');
                    }),
                    $('#signupbutton').click(function(e) {
                        e.preventDefault();
                        console.log("in sec 2")
                        $('#section2').prepend('<h4 class="panel-title" data-parent="#accordion"data-target="#collapseTwo" data-toggle="collapse">')
                    });
            },

......... //代碼

Answer 1

這不是在主干視圖上使用事件哈希的方法。

var ListView = Backbone.View.extend({

events: {
 "click #couponncheck2": function(e) {
   // code goes here
}

Answer 2

將事件委派用於DOM中動態創建的元素

 $(document).on('click', '#signupbutton', function(e){
    e.preventDefault();
    console.log("in sec 2")
    $('#section2').prepend('<h4 class="panel-title" data-parent="#accordion"data-target="#collapseTwo" data-toggle="collapse">')
  });

Answer 3

一種更好的處理骨干事件的方法：

var ListView = Backbone.View.extend({

        events: {
            'click #couponcheck2': 'checkCoupon',
            'click #signupbutton' : 'signUp'
        },

        checkCoupon: function(e) {
              e.preventDefault();
              $('#couponcheck').empty();
              $('#couponcheck').append('<div class="col-xs-8"><input type="text" class="form-control" id="enterCoupon"></div>');
              $('#couponcheck').append('<div class="col-xs-8"><button type="button" class="btn btn-success btn-sm" id="couponbutton"><span class="glyphicon glyphicon-ok"></span> Apply</button></div>');
         },

         signUp: function(e) {
                e.preventDefault();
                console.log("in sec 2");
                $('#section2').prepend('<h4 class="panel-title" data-parent="#accordion"data-target="#collapseTwo" data-toggle="collapse">');
         }
...