Question

     //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 triggered

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

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

问题是，当我点击从模板呈现的图片时，会打开一个fancybox弹出窗口，其中会显示 templatedetails 但是当我点击弹出窗口中的按钮时它会没有被触发。为什么点击功能不起作用？

渲染后生成的HTML是

<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>

直到这一点，一切正常，但我不明白为什么点击事件不起作用。请给我一些解决方案。

Answer 1

这不起作用，因为fancybox没有直接打开你的内容，而是将它“克隆”到它自己的容器$（'＃fancybox-content'）中。很好的解决方案我认为可以通过将此容器重新绑定为Backbone.View。$ el，因此您将使用Backbone.events {}工作：

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

Answer 2

执行此行时的代码

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

该元素在dom中不可用。所以你需要做的是

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

根据我的观察，this.el和$（'＃pp - '+ this.model.get（'username'））与li标签相同。所以请将其称为$（this.el）。如果有效，请告诉我

Answer 3

请更新以下代码。

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>'`)

为什么单击主干中的事件不起作用？

3 个答案: