I have a view in backbone.js App.Backbone.UserView = Backbone.View.extend({ tagName: ‘li’, className: ‘pp-entry group’,

Question

0

Asked: May 24, 20262026-05-24T01:07:54+00:00 2026-05-24T01:07:54+00:00

I have a view in backbone.js App.Backbone.UserView = Backbone.View.extend({ tagName: ‘li’, className: ‘pp-entry group’,

0

I have a view in backbone.js

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="" /><a class="pp-pic-wrap show-fb" href="#pp-details-<%=username%>"></a>),
        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

        $(this.el).append(this.templatedetails(this.model.toJSON())); //appending to the template
     $(".show-fb").fancybox();
        },

        //But when i am defining the function the click event does not get triggered

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

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

this is the html generating .
what is happening here as i analyise is fancy box is adding his html in my div so clickevnet on addlinktowallet and other are not working .
Please suggest what can i do to make it work with fancybox ?

<li id="pp-rahul" class="pp-entry group">
<img class="pp-pic" alt="" src="i/pp-pic-8.png">
<a class="pp-pic-wrap show-fb" href="#pp-details-rahul"></a>

<div style="display: none;">
 // added by fancybox 
<div style="width: auto; height: auto; overflow: auto; position: relative;">
<div id="pp-details-rahul" class="pp-details">
<img class="pp-pic" alt="" src="i/pp-pic-2.png">
<h4 class="pp-name">rahul</h4>
<p class="pp-attr">
</p>
<p class="pp-attr mar-btm-20">
       //here other html are coming .
</p>
<div class="cta clear">
   //here the html of button 
</div>
</div>
</div>
</div>
</li>