2

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

我放入颜色框中的 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});

  }
4

2 回答 2

1

您关于为什么没有触发事件的第一个假设是正确的。在主干视图中，事件被委托给它们的 root el，因为 colorBox 的元素不是视图的子元素，所以el它的事件不会被触发。

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

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

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

$(document).on('click', '.like', function(){
      console.log("hello");
      alert("hello");
});
于 2013-11-12T21:07:14.683 回答
0

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

于 2013-11-12T21:11:25.173 回答