CODEWITHSUNDEEP
javascriptjquerybackbone.js
Arun Prakash
Arun Prakash

Reputation: 441

Add two events in backbone.js

I added two jQuery events, the second jQuery event is not triggering. What might be the issue? Here is my code :

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

......... // code

Upvotes: 0

Views: 160

Answers (3)

blockhead
blockhead

Reputation: 9705

That is not the way to use the events hash on a backbone view.

var ListView = Backbone.View.extend({

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

Upvotes: 5

mador
mador

Reputation: 1223

a much nicer way to handle events in backbone:

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

Upvotes: 1

Sudharsan S
Sudharsan S

Reputation: 15393

Use Event delegation for dynamically created elements in the 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">')
  });

Upvotes: 2

Related Questions