Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery click event not firing in firefox

Tags:

jquery

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>
like image 339
FiveTools Avatar asked Nov 20 '25 21:11

FiveTools


2 Answers

Your problem might be the use of the longdesc, which is not supported by major browsers. Internet Explorer may be allowing you to add an attribute to the DOM that it does not recognize, while FireFox may disallow this behavior. Try storing the description in the alt attribute, or if need be, in through jquery's data method.

like image 155
Karmic Coder Avatar answered Nov 22 '25 15:11

Karmic Coder


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");
like image 33
Hugo Avatar answered Nov 22 '25 13:11

Hugo



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!