jquery + fancybox问题，fancybox jquery事件没有“看到”刚刚添加到 DOM 树的 html 内容

Question

我使用 jQuery 和 Fancybox 来以这种方式生成图像库：我只向用户显示一张中等大小的图像，他单击（然后单击预加载到隐藏

中的其他图像链接）并获得漂亮的图像库。

我需要预加载图像链接，因为它不是静态列表，它取决于用户单击的第一个图像，这样我可以防止 fancybox 显示重复的图像。

这是我的代码（有点混乱，因为我从 ruby​​ 获取图像 url):

javascript:

$(function() {

    $('#car_image').click(function(e) { // generating fancybox gallery containing only large images
    // here we should generate fancybox <div id="large_images_gallery_div"> and place this div inside of <div id="car_image">

    var gallery_images_urls = [];
    var gallery_images_tagged = '';

    <% @car.photos.each do |car_photo| %>
        var current_image_url = '<%= car_photo.image.url(:large) %>';

        if(current_image_url != $('#changeme').attr('href')) gallery_images_tagged += '<a href="' + current_image_url + '" class="fancybox" rel="my_car_gallery" />';
    <% end%>

        $('#car_image div#large_images_gallery_div').replaceWith('<div id="large_images_gallery_div" style="visibility: hidden;">' + gallery_images_tagged + '</div');

    });

  $("a.fancybox").fancybox();


});

html:

<div id="car_image">
    <%= link_to @car.photos.first.image.url(:large), :class => "fancybox", :rel => "my_car_gallery", :id => "changeme" do %>
        <%= image_tag @car.photos.first.image.url(:medium) %>
    <% end%>

    <div id="large_images_gallery_div" style="visibility: hidden;">
                <-- HERE ALL GALLERY IMAGES LINKS BEING PRELOADED -->
    </div>
</div>

问题: 我的列表已正确加载，但 fancybox 只显示第一个图像，不显示其他图像，这是由 jQuery 添加的replaceWith() 方法

可能无法“看到”DOM 树已更改，

顺便说一句，对我糟糕的英语

UPDATE

图像之前的 html 感到抱歉链接预加载：

<div id="car_image">
    <a rel="my_car_gallery" id="changeme" class="fancybox" href="/uploads/photo/image/44/large_1.jpg">
        <img src="/uploads/photo/image/44/medium_1.jpg">
    </a>

    <div style="visibility: hidden;" id="large_images_gallery_div">

    </div>
</div>

图像链接预加载后的 html：

<div id="car_image">
    <a rel="my_car_gallery" id="changeme" class="fancybox" href="/uploads/photo/image/44/large_1.jpg">
        <img src="/uploads/photo/image/44/medium_1.jpg" >
    </a>

    <div style="visibility: hidden;" id="large_images_gallery_div">
        <a rel="my_car_gallery" class="fancybox" href="/uploads/photo/image/45/large_2.jpg"></a>
        <a rel="my_car_gallery" class="fancybox" href="/uploads/photo/image/46/large_3.jpg"></a>
        <a rel="my_car_gallery" class="fancybox" href="/uploads/photo/image/47/large_4.jpg"></a>
        <a rel="my_car_gallery" class="fancybox" href="/uploads/photo/image/48/large_5.jpg"></a>
    </div>
</div>

Answer 1

正如我在 #jquery @ freenode 上被告知的，这个问题是关于 jQuery.delegate()< /a> 所以我得到了这个方法的帮助：

$('#car_image').delegate(
    ".fancybox",
    "click",
        function (ev) {
            ev.preventDefault();
            $.fancybox(
                (function () {
                    var gallery_images_urls = [];

                    gallery_images_urls.push('<img src="' + $('a#changeme').attr('href') + '" />'); // pushing first image

                    <% @car.photos.each do |car_photo| %>
                        if($('a#changeme').attr('href') != '<%= car_photo.image.url(:large) %>') gallery_images_urls.push('<img src="<%= car_photo.image.url(:large) %>" />');
                    <% end %>

                    return gallery_images_urls;
                }).bind(this)(),
                    {
                        transitionIn : 'elastic',
                        transitionOut : 'elastic',
                        speedIn : 600,
                        speedOut : 200
                    }
            );
    }
);

每次点击#car_image都会触发delegate()，我解决了直接向$提供fancybox图像对象的问题.fancybox()无需任何额外 html 预加载的方法