【发布时间】:2013-04-09 01:41:43
【问题描述】:
我有以下链接,点击时应该显示花式框——在这里使用 jquery 插件:http://fancyapps.com/fancybox/
<div class="boxes">
<a href="/signup.html" class="btn popup-link fancybox.ajax">Sign Up</a>
<a href="/signin.html" class="btn popup-link fancybox.ajax">Sign In</a>
</div>
我遇到的问题是fancybox 仅适用于第一个链接。 在 Meteor 中,我有:
Template.mytemplate.rendered = function () {
console.log($(this.find('a.popup-link')));
$(this.find('a.popup-link')).fancybox({
padding: 18,
openMethod: 'changeIn',
closeBtn : false,
beforeShow: function() {
$('input:checkbox').ezMark();
$('select').selectbox();
$('.trigger-ajax').on('click', function(e) {
e.preventDefault()
$('.fancybox-wrap').animate({ 'left': '-100%'}, 400, function() {
$(this).parent().find('.popup-link').trigger('click');
})
})
}
});
}
当我点击第一个链接时,fancybox 会按预期加载,但是当我点击第二个链接时,没有任何反应。
通过console.log,它也清楚地发现find 只返回第一个元素......因此出现了问题。
请注意,如果我只使用 ('a.popup-link') 而不使用 find,它将不起作用。
发生了什么事?谢谢!
【问题讨论】:
标签: javascript jquery meteor