Question

我已经看到了一些与此类似的其他跨浏览器问题，但它似乎归结为您从jQuery使用的功能。以下是我在HTML文档中出现的两段jQuery。为了我的问题，我把它们放在两个单独的脚本标签中。它是第二个仅在Firefox中执行的脚本标记。它对Safari或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>

Answer 1

你需要把这段代码，

<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>

内

，

jQuery(document).ready(function() {


});

所以它应该是

<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>

Answer 2

不同的浏览器在某些边缘情况下会发出不同的事件。当从下拉列表中选择一个选项时，Firefox显然会触发“单击”事件;其他浏览器没有。

然而，无论浏览器如何，“更改”事件都应该触发。以下是否适合您？

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

编辑：另外，正如另一个答案所示，将其置于jQuery（文档）.ready（）函数内部将是一种很好的做法。

为什么我的jQuery脚本只能在Firefox中运行？

2 个答案: