如何将事件附加到主干中的颜色框弹出窗口？答案

【问题标题】：How to attach events to a colorbox popup in backbone?如何将事件附加到主干中的颜色框弹出窗口？
【发布时间】：2013-11-12 20:46:03
【问题描述】：

我的颜色框弹出窗口中触发的事件有很多问题。目前，有一个主干视图负责处理用户个人资料页面。有一个照片库，单击时会打开一个包含照片的颜色框，以及 cmets、评论输入表单和点赞按钮。

我放入颜色框中的 html 是模板本身的隐藏 div。一切都显示得很好，但点击东西不会触发任何东西。我想我会尝试将事件处理程序附加到我传递给 colorbox 函数的 html 中，因为我猜测弹出的颜色框不被认为是在主干视图的 dom 中。该函数如下所示，Backbone 视图触发了 img 上的点击事件。 var photoBox 是我想在颜色框中显示的 html。我试图将事件处理程序附加到 photoBox，但无济于事。

 popColorbox: function(event) {
    var photoID = $(event.currentTarget).parent().attr('data-id');
    var photoBox = $("#inline_example" + photoID).parent().html();

    $(photoBox).on('click', '.unlike', function(){
      console.log("hello");
      alert("hello");
    });

    $(photoBox).on('click', '.like', function(){
      console.log("hello");
      alert("hello");
    });

    $.colorbox({html: photoBox});

  }

【问题讨论】：

标签： javascript jquery backbone.js colorbox

【解决方案1】：

您对事件未触发原因的第一个假设是正确的。在主干视图中，events 被委托给它们的根 el，因为 colorBox 的元素不是视图 el 的子元素，因此不会触发其事件。

当您尝试直接绑定到 photoBox 时，您的事件没有被触发的原因我认为是因为 colorBox 插件需要一个 html 字符串来构建它是 html（而不是仅仅附加你传入的节点）。

为了触发您的事件，您需要将它们绑定到 DOM 上的某个现有 higher 元素，在这种情况下，您可能需要转到文档。

$(document).on('click', '.unlike', function(){
      console.log("hello");
      alert("hello");
    });

$(document).on('click', '.like', function(){
      console.log("hello");
      alert("hello");
});

【讨论】：

谢谢！这正是我所需要的。

【解决方案2】：

也许这里的事件监听器被添加到 html 而不是选择器上。请查看有关添加事件侦听器的 jQuery 文档。 http://api.jquery.com/on/

【讨论】：