我在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});
}
答案 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/