javascript - 如何将事件附加到 backbone 中的 colorbox 弹出窗口？

Question

我的 colorbox 弹出窗口中的事件触发有很多问题。当前，有一个主干 View 负责处理用户配置文件页面。有一个照片库，单击它会打开一个包含照片、评论、评论输入表单和点赞按钮的颜色框。

我放入 colorbox 的 html 是模板本身的隐藏 div。一切都显示得很好，但点击东西不会触发任何东西。我想我会尝试将事件处理程序附加到我传递给 colorbox 函数的 html，因为我猜弹出的 colorbox 不被认为在主干 View 的 dom 中。函数如下，Backbone View 触发 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});

  }

Answer 1

您关于未触发事件的原因的第一个假设是正确的。在 Backbone View 中的 events被委托(delegate)给它们的根 el，因为 colorBox 的元素不是 View 的 el 的子元素，所以它的事件不会被触发。

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

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

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

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