如何将事件附加到骨干中的colorbox弹出窗口?

时间:2013-11-12 20:46:04

标签: javascript jquery backbone.js colorbox

我在colorbox弹出窗口中触发事件时遇到很多问题。目前,存在处理用户简档页面的骨干视图。有一个照片库,单击时会打开一个包含照片的颜色框,以及注释,注释输入表单和类似按钮。

我放入彩盒的html是模板本身的隐藏div。一切都很好,但点击的东西不会触发任何东西。我想我会尝试将事件处理程序附加到我传递到colorbox函数的html中,因为我猜测弹出的颜色框不被认为是在骨干视图中的dom。该函数如下所示,Backbone视图触发img上的click事件。 var photoBox是我想要在colorbox中显示的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});

  }

2 个答案:

答案 0 :(得分:1)

关于未触发事件的原因的第一个假设是正确的。在骨干视图中,events被委托给它们的根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");
});

答案 1 :(得分:0)

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