Why click event in backbone not working?

     //I am using template in view

     App.Backbone.UserView = Backbone.View.extend({
        tagName: 'li',
        className: 'pp-entry group',
        template :_.template('<img src="i/pp-pic-8.png" class="pp-pic" alt="" />),
        templatedetails:_.template('`<div style="display:none"><div id="pp-details-<%=username%>" class="pp-details"><div class="cta clear"><input type="button" name="" value="Add to my Wallet" class="mar-right-10 addtowallet" /><input type="button" class="mar-right-10 addtogib" name="" value="Add to gib as link" /><input type="button" name="" value="Close" onclick="$.fancybox.close()" /></div></div><.div>'`)

        //Here is the click event defined

        events:{    
            "click .addtowallet":"addlinktowallet",
            "click .addtogib":"addasgiblink"
            },

       //Render contents

       render: function() { 
        $(this.el).html(this.template(this.model.toJSON()));
        $(this.el).attr('id', 'pp-'+this.model.get('username')); //This is used to set the id for the "li" tag

        $('#pp-'+this.model.get('username')).append(this.templatedetails(this.model.toJSON())); //appending to the template
        },

        //But when i am defining the function the click event does not get trigg开发者_StackOverflow中文版ered

        addasgiblink: function(){
            alert("gib button clicked");        
            },

        addlinktowallet: function(){
            alert("wallet button clicked");     
            }
});

The question is when i click on the pic as rendered from template a fancybox popup opens where templatedetails is rendered but when i click on the buttons in the popup it does not get triggered. Why the click function is not working?

The HTML that is generated after rendering is

<li id="pp-bikram" class="pp-entry group">
<img class="pp-pic" alt="" src="i/pp-pic-8.png">
<div style="display:none">
<div id="pp-details-bikram" class="pp-details">
<div class="cta clear">
<input class="mar-right-10 addtowallet" type="button" value="Add to my Wallet" name="">
<input class="mar-right-10 addtogib" type="button" value="Add to gib as link" name="">
<input type="button" onclick="$.fancybox.close()" value="Close" name="">
</div>
</div>
</div>
</li>

Till this point everything is working fine but i am not getting why the click event is not not working. Please suggest me some solution.

This cannot work because fancybox is not opening your content directly but its "clonning" it into its own container $('#fancybox-content'). Nice solution i think is possible by rebinding this container as Backbone.View.$el so you'll have Backbone.events{} working uppon that:

window.FancyboxView = Backbone.View.extend({
    events: {
        click: 'handleClick'
    },
    initialize:function () {
        this.$trigger = this.$el.find('a.trigger');
        this.$trigger.fancybox({
            onComplete:$.proxy(function () {
                this.setElement($('#fancybox-content')[0]);
            }, this)
        });
    },
    handleClick:function (e) {
        e.preventDefault();
            console.log('woala!')
    }
});

In your code while executing this line

$('#pp-'+this.model.get('username')) 

that element wont be available in the dom. So what you have to do is

$(this.el).append(this.templatedetails({// Your json}))

As per my observation both this.el and $('#pp-'+this.model.get('username')) are the same the li tag. So refer it as $(this.el). Please let me know if it works

Please update the code as below.

events:{
            "click .addtowallet":"addlinktowallet",
            "click .addtogib":"addasgiblink"
            "click .fancybox":"fancyBoxClose"
        },

        fancyBoxClose : function(){
            $.fancybox.close()
        }

templatedetails:_.template('`<div style="display:none"><div id="pp-details-<%=username%>" class="pp-details"><div class="cta clear"><input type="button" name="" value="Add to my Wallet" class="mar-right-10 addtowallet" /><input type="button" class="mar-right-10 addtogib" name="" value="Add to gib as link" /><input type="button" name="" value="Close" class="fancybox" /></div></div><.div>'`)