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

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

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

但是，无论浏览器如何，“change”事件都应该触发。以下内容对您有用吗？

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(document).ready() 函数中是一个很好的做法。