CODEWITHSUNDEEP
jqueryfirefox
FiveTools
FiveTools

Reputation: 6030

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>

Upvotes: 3

Views: 9482

Answers (4)

Kerry Comeaux
Kerry Comeaux

Reputation: 1

I had a similar problem where the click event was not working in firefox, only to determine that the execution was not being fired on a "span". Moved attributes from the span to the "button" tag and it started working.

Change html from: <span class="some-class"> To be: <button class="some-class">

Javascript: 

$(document).on('click','.some-class',function(){alert( "Test click event.");});

In a nutshell, you need to address the type of event for the tag you are listening for.

Upvotes: 0

vijay prasad
vijay prasad

Reputation: 31

I too stuck with the same problem where firefox is not working with onclick event.

My requirement : I had to add multiple album dynamically and so i have to passed id for each album to fancybox so that image gallery can open images for a particular album.

I did googling and I find some trick from this URL, but that did not work in my case. I lost 3-4 hours in searching and doing changes. Finally I did some modification in my HTML code and fire onclick event on the album image tag instead of anchors tag and it works fine in Mozilla , IE-7 ,IE-8 ,Safari as well as chrome.

onclick="$('a.pop{$key}').fancybox().trigger('click');" 

//  { @$key = Use your dynamic id  }

I hope this may help you guys.

Upvotes: 1

Hugo
Hugo

Reputation: 2913

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");

Upvotes: 2

Karmic Coder
Karmic Coder

Reputation: 17949

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.

Upvotes: 3

Related Questions