javascript - 当 View 位于 Fancybox 中时，我无法触发 Backbone.js 事件

Question

我有一个在 Fancybox 中呈现的主干 View 。我可以单击 anchor 标记，它会起作用，但不会触发 Backbone View 中的事件。我对 ShadowBox 和另一个我不记得的灯箱有同样的问题。有什么想法吗？

var LightboxItemView = Backbone.View.extend({
    className : 'lighbox-item',

    events : {
        "click .lightbox-preview" : "visitItemPage"
    },

    initialize : function() {
        _.bindAll(this, "render");
        this.render();
    },

    visitItemPage : function() {
        console.log('visiting time');
    },

    render : function() {
        var graphicPreview = $('<img>');
        graphicPreview.addClass('lightbox-preview');
        graphicPreview.attr('src', this.model.get('url_m'));

        var lbContent = $('<div></div>');
        lbContent.attr("id", 'lb' + this.model.get('id'));
        lbContent.append(graphicPreview);

        var lbHider = $('<div></div>');
        lbHider.css("display", "none");
        lbHider.append(lbContent);

        $(this.el).append(lbHider);
        return this;
    }
});

Answer 1

灯箱库将您的元素从您在 DOM 中插入它的位置移动。他们通常会创建一个新容器，将您的元素放入其中，然后将容器显示在其他所有内容之上。

首先，在您的浏览器中使用 Firebug 或检查器来查看库的具体功能。然后，您可以在 jQuery 中使用普通事件处理程序使其工作 http://api.jquery.com/bind/ .

initialize: function() {
  $('<your-element-in-the-overlay-box> a').click(handler)
}

Backbone 事件不起作用，因为该元素不再位于您的 Backbone View 的 el 中。