Trigger event with newly created anchor elements_问答_开发者

Trigger event with newly created anchor elements

开发者 https://www.devze.com 2023-01-20 07:12 出处：网络

I\'m using the fancybox lightbox plugin in jquery. It hooks into anchor tags such that the following pulls up an image that is chained with the other images referenced with rel = \"example_group\":

I'm using the fancybox lightbox plugin in jquery. It hooks into anchor tags such that the following pulls up an image that is chained with the other images referenced with rel = "example_group":

<script type="text/javascript">
   $(document).ready(function() {
      $("a[rel=example_group]").fancybox();
   });
</scr开发者_开发知识库ipt>

<body>
  <a rel="example_group" href="./example/7_b.jpg"><img alt="" src="./example/7_s.jpg" /></a>
  <a rel="example_group" href="./example/9_b.jpg"><img alt="" src="./example/9_s.jpg" /></a>
</body>

I'd like to add additional images to the pop-up gallery but I do not want to include them on the page before a link is hit. So right now, two images are being displayed and are then linked. I would like to, for example, hook in a third image without explicitly displaying it in the body.

I attempted the following:

<script type="text/javascript">
   $(document).ready(function() {
      $("a[rel=example_group]").fancybox();

      $("<a rel='example_group' href='./example/8_b.jpg'><img src='./example/8_s.jpg' /></a>").appendTo("body");
   });
</script>

This will hook a third image into the gallery, but also displays the image in the body. So I tried the same thing with the appendTo portion:

<script type="text/javascript">
   $(document).ready(function() {
      $("a[rel=example_group]").fancybox();

      $("<a rel='example_group' href='./example/8_b.jpg'><img src='./example/8_s.jpg' /></a>");
   });
</script>

But this added element doesn't seem to associate with the rel group, and only two images are chained together.

How can I add a new anchor element and hook it to the .fancybox call without having to append the reference to the body? I assume this question is independent enough of the specific fancybox code. It seems just a matter of sufficient jquery expertise.

I don't really know much about .fancybox(), but here's an idea you might try.

Place the images that you don't want displayed on the page in a container that is hidden. They won't be visible on the page, but I would imagine they would be in the fancybox.

HTML

<body>
    <div id='hiddenContainer' style='display:none;'></div>

    <a rel="example_group" href="./example/7_b.jpg"><img alt="" src="./example/7_s.jpg" /></a>
    <a rel="example_group" href="./example/9_b.jpg"><img alt="" src="./example/9_s.jpg" /></a>
</body>

In jQuery, append the image to that container.

$(document).ready(function() {
    $("<a rel='example_group' href='./example/8_b.jpg'><img src='./example/8_s.jpg' /></a>")
          .appendTo("#hiddenContainer");
    $("a[rel=example_group]").fancybox();
});