CODEWITHSUNDEEP
javascriptjquerygoogle-chromefirefoxsafari
sparecycle
sparecycle

Reputation: 2058

Why would my jQuery script only work in Firefox?

I've seen a few other cross-browser issues similar to this but it seems to come down to what functions you are using from jQuery. Here are my two segments of jQuery as they appear in my HTML doc. I've got them in two separate script tags for the sake of my question. It is the second script tag which is only executing in Firefox. It does not work (or even log in the console) for Safari or Chrome.

<script type="text/javascript">
jQuery(document).ready(function() {
             jQuery("#product_accordion_custom a").click();
             jQuery('#product_tabs_product_review_contents').appendTo('.product-collateral');

             //toothbrush changing - image to menu
             var colorDropDown = jQuery("select#attribute92");
             var colorOptions = jQuery("select#attribute92 option");

                jQuery("div.slide a").click(function(e){
                    var color = jQuery(this).find("img")[0].alt;
                    //colorDropDown.val(color).change();
                    for(var i = 0;i<colorOptions.length;i++){
                        s_color = colorOptions[i].innerText;
                        if(s_color==color){
                            colorDropDown.val(colorOptions[i].value).change();
                        }
                    }

                });
        }); 
</script>

<script type="text/javascript">
//toothbrush changing - menu to image
jQuery(document).on("click", "select#attribute92 option:selected", function(){
    var selectorText = jQuery(this).text();
    var tag = jQuery("img[alt='"+selectorText+"']");
    jQuery("div.slide a").find(tag).click();
    console.log(selectorText);
});
</script>

Upvotes: 0

Views: 85

Answers (2)

Jason Reid
Jason Reid

Reputation: 870

Different browsers emit different events in certain edge cases. Firefox apparently fires a "click" event when an option is selected from a dropdown; other browsers do not.

The "change" event should fire regardless of browser, however. Would the following work for you?

jQuery(document).on("change", "select#attribute92", function(){
   var selectorText = jQuery(this).children(":selected").text();
   var tag = jQuery("img[alt='"+selectorText+"']");
   jQuery("div.slide a").find(tag).click();
   console.log(selectorText);
});

Edit: Also, as the other answer indicates, placing this inside of a jQuery(document).ready() function would be good practice.

Upvotes: 1

HB Kautil
HB Kautil

Reputation: 267

YOu need to put this code,

<script type="text/javascript">
//toothbrush changing - menu to image
jQuery(document).on("click", "select#attribute92 option:selected", function(){
    var selectorText = jQuery(this).text();
    var tag = jQuery("img[alt='"+selectorText+"']");
    jQuery("div.slide a").find(tag).click();
    console.log(selectorText);
});
</script>

within,

jQuery(document).ready(function() {


});

So it should be 

<script type="text/javascript">
jQuery(document).ready(function() {
    //toothbrush changing - menu to image
    jQuery(document).on("click", "select#attribute92 option:selected", function(){
        var selectorText = jQuery(this).text();
        var tag = jQuery("img[alt='"+selectorText+"']");
        jQuery("div.slide a").find(tag).click();
        console.log(selectorText);
    });
});
    </script>

Upvotes: 1

Related Questions