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

backbone view is triggering the event delegate many times

本文关键字:事件 视图      更新时间:2023-09-26

嗨,所以我在主干中有一个类似于这个的视图

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();
                }
            }
        });
    }
});

这个想法是,当我点击带有"download action"类的LI时,下载方法在我的视图中被调用,应该从ajax调用中选择一个url,然后添加到LI下的ancht标记的href attr中,然后我触发锚点击,但当我这样做时,下载方式开始无限期地循环调用,有人能告诉我为什么会发生这种情况吗??谢谢

我假设触发的点击事件正在传播到li.download-action,然后再次启动ajax下载功能。解决方案是使用window.location.href将用户导航到新的url,或将该链接移出li.download-action.