Question

我有两个链接打开一个精美的盒子。

页面加载时，页面上有一个。另一个我在执行一些操作后用Ajax注入页面。

两个链接都是相同的。页面加载时页面上的那个在单击时打开了fancybox。

注入Ajax的那个没有。

以下是application.js文件中fancybox的jquery脚本。

$(document).ready(function() {
    $("a.iframe`").fancybox({
        'hideOnContentClick': true,
        'hideOnOverlayClick': true,
        'padding'           :   0 ,
            'width'         :   600 ,
            'height'        :   500,
            'transitionIn'  :   'elastic',
            'transitionOut' :   'elastic',
            'speedIn'       :   200, 
            'speedOut'      :   200,
    });
});

这是打开fancybox的链接，位于页面加载页面上：

<a class="iframe" href="/icons?id=5&upload_for=Greeting">change</a>

以下链接无法打开我使用ajax在页面上放置的精美框：

<a class="iframe" href="/icons?id=30&upload_for=Greeting">change</a>

为什么一个链接起作用而另一个

Answer 1

当您致电$('a.iframe').fancybox(...)时，它仅适用于页面上已有的元素，并且不会通过ajax自动应用于将来的元素。

如果您使用类似.js.erb文件的内容动态插入链接，则可以在其中添加另一个.fancybox(...)来电。

或者，您可以使用类似the Live Query plugin的内容。这将允许您执行此类操作，它将自动应用于以后的所有项目：

$('a.iframe').livequery(function(){ 
  $(this).fancybox({
    'hideOnContentClick': true,
    'hideOnOverlayClick': true,
    'padding'           :   0 ,
        'width'         :   600 ,
        'height'        :   500,
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   200, 
        'speedOut'      :   200,
  }); 
});

花式框打开一个链接，但不打开另一个链接

1 个答案: