FiveTools FiveTools - 21 days ago 7
jQuery Question

jquery click event not firing in firefox

This function attaches the fancybox plugin to some images. When an image is clicked in the image slider, it opens the corresponding larger image within the

#hidden images
div. It works in Internet Explorer but does not work in Firefox (3.6.9). How do i get it to work in Firefox?

<script type="text/javascript">
$(document).ready(function() {
$("#hidden_images a").fancybox();
$("#image_slider img").click(function(event) {
var $tgt = $(event.target);
var $desc = $tgt.attr("longdesc");
$("#" + $desc).click();
});
});
</script>


Here is my HTML:

<div id="image_slider" class="imageflow">
<img src="images/press/charity1.jpg" longdesc="charity1" width="250" height="250" alt="Charity 1" />
<img src="images/press/charity2.jpg" longdesc="charity2" width="250" height="250" alt="Charity 2" />
</div>
<div id="hidden_images">
<a id="charity1" href="images/press/charity1_lg.jpg" style="display:none;"><img src="images/press/charity1_lg.jpg" alt="charity one caption"/></a>
<a id="charity2" href="images/press/charity2_lg.jpg" style="display:none;"><img src="images/press/charity2_lg.jpg" alt="charity two caption"/></a>
</div>

Answer

For all intent and purposes you can have a foo="bar" attribute and that'll still work. Here's how I would code the inner portion of your jquery

<script type="text/javascript">
   $(document).ready(function() {
       $("#hidden_images a").fancybox(); 
       $("#image_slider img").click(function(event) {
           window.location = $("#" + $(event.target).attr("longdesc")).attr("href");
       });
   });
</script>

Works for me on safari, ff and chrome.

Edit Derr, I think I misread your post that might not be what you are looking for...

Edit 2 AHA Moment, here's how you do it.

$("#" + $(event.target).attr("longdesc")).fancybox().trigger("click");