Javascript 主干视图多次触发事件委托

您好，我在主干中有一个类似于此的视图

app.FileListItemView = Backbone.View.extend({
    tagName: 'li',
    className: 'list-group-item clearfix',
    events: {
        'click .download-action': 'download'
    },
    template: _.template(
            "<div class='pull-left' style='width: 80%'>\n\
                <%= name %><br><span style='font-size: 10px;'><%= path %></span>\n\
            </div>\n\
            <div class='pull-right' style='width: 20%'>\n\
                <div class='dropdown'>\n\
                    <button class='btn btn-default dropdown-toggle' type='button' data-toggle='dropdown'>\n\
                      Actions\n\
                      <span class='caret'></span>\n\
                    </button>\n\
                    <ul class='dropdown-menu' role='menu'>\n\
                      <li class='download-action' data-id='<%= id %>' data-accountid='<%= accountid %>' role='presentation'><a class='super-anchor' role='menuitem' tabindex='-1' href='#'>Download</a></li>\n\
                    </ul>\n\
                </div>\n\
            </div>"
            ),
    initialize: function () {
    },
    render: function () {
        this.$el.html(this.template(this.model));
        return this;
    },
    download: function (event) {
        //console.log(this.$el.find('.download-action-link').data('id'));
        var el = this.$el.find('.download-action');
        var id = el.data('id');
        var accountid = el.data('accountid');
        var url = app.config.get('apiURL');
        var apiKey = app.config.get('apiKey');

        console.log(el.prop('tagName'));

        $.ajax(url + '/accounts/' + accountid + '/links', {
            data: {
                'file_id': id, 'direct': true
            },
            headers: {
                Authorization: 'ApiKey ' + apiKey
            },
            type: 'POST',
            success: function (data) {
                if (data.active) {
                    var a = el.find('.super-anchor');
                    console.log(a);
                    //change this part
                    //a.attr('href', data.url).trigger('click');
                    //to this
                    a.attr('href', data.url).on('click', function(event){
                      event.preventDefault();
                      event.stopPropagation();
                    })[0].click();
                }
            }
        });
    }
});

app.FileListItemView=Backbone.View.extend({
标记名：“li”，
className:“列表组项目clearfix”，
活动：{
“单击。下载操作”：“下载”
},
模板：\ u0.template(
“\n\

\n\
\n\
\n\
\n\
\n\
操作\n\
\n\
\n\
\n\
\n\
\n\
\n\
"
),
初始化：函数（）{
},
渲染：函数（）{
this.el.html（this.template（this.model））；
归还这个；
},
下载：函数（事件）{
//console.log（this.$el.find（'.download action link'））.data（'id'）；
var el=this.$el.find（'.download action'）；
变量id=el.data（'id'）；
var accountid=el.data（'accountid'）；
var url=app.config.get（'apirl'）；
var apiKey=app.config.get（'apiKey'）；
console.log（el.prop（'tagName'））；
$.ajax（url+'/accounts/'+accountid+'/links'{
数据：{
“文件id”：id，“直接”：true
},
标题：{
授权：“ApiKey”+ApiKey
},
键入：“POST”，
成功：功能（数据）{
如果（data.active）{
变量a=el.find（'.super-anchor'）；
控制台日志（a）；
//更改此部分
//a、 attr（'href'，data.url）.trigger（'click'）；
//对此
a、 attr（'href'，data.url）.on（'click'，函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
})[0]。单击（）；
}
}
});
}
});

---

其思想是，当我单击带有“download action”类的LI时，在我的视图中调用download方法，该方法应从ajax调用中选择一个url，然后添加到LI下的anchot标记的href attr，然后触发锚点击，但当我这样做时，下载方法开始无限期地在循环中调用，能告诉我为什么会这样吗？？谢谢

我假设触发的点击事件被传播到li.download-action，然后再次启动ajax下载功能。一个解决方案是使用Wiel.Loosi.HREF将用户导航到新的URL或将链接移出侧Li。下载动作。

你应该考虑将模板移动到DOM。嘿，你指向我的方向是正确的，但是解决方案有点不同。基本上，我在锚标记本身中添加了一个事件处理程序来停止传播，现在一切正常，谢谢！