单击处理程序不能在 chrome 中工作，但在 FF 和 I.E 中工作答案

【问题标题】：Click handler not working in chrome, but working in FF and I.E单击处理程序不能在 chrome 中工作，但在 FF 和 I.E 中工作
【发布时间】：2013-10-23 12:52:02
【问题描述】：

magento 中的这个 jQuery 代码基本上是一个三步汽车零件查找器，首先用户选择制造年份，然后是制造公司，然后是型号以获取汽车零件列表。该代码仅适用于 IE 和 Firefox，但不适用于 Chrome。我找不到我的错误。期待解决方案

$j = jQuery.noConflict();
$j(document).ready(function(){
    for(st1 = 1; st1 <= 1000; st1++) {
        //filling options of select.opt1
        //works fine
    }

    $j("#shop-by-vehicle select.opt1 option").click(function() {
        $j("#shop-by-vehicle select.opt2 option").remove();
        $j("#shop-by-vehicle select.opt3 option").remove();
        for(st2 = 1; st2 <= 1000; st2++) {
            //used to fill options of select.opt2
        }

        $j("#shop-by-vehicle select.opt2 option").click(function() {
            $j("#shop-by-vehicle select.opt3 option").remove();
            for(st3 = 1; st3 <= 10000; st3++) {
                //used to fill options of select.opt3
            }

            $j("#shop-by-vehicle select.opt3 option").click(function() {
                // do something when select.opt3 options are clicked
            });
        });
    });
}); //end jquery function

HTML 代码

<div id="shop-by-vehicle">
    <div class="steps">
        <select class="opt1 opt"></select>
    </div>
    <div class="steps">
        <select class="opt2 opt"></select>
    </div>
    <div class="steps">
        <select class="opt3 opt"></select>
    </div>
</div>

【问题讨论】：

执行 $j=jQuery.noConflict();返回 jQuery?
另外，您是否尝试过将代码包装在匿名闭包中而不是使用 noconflict ？也许这就是问题
不要将点击事件绑定到选项。相反，将更改事件绑定到选择

标签： jquery magento google-chrome filter

【解决方案1】：

嵌套的click 处理程序很少能正确解决问题。此外，在select 元素上使用change 事件以获得完全可访问性。试试这个：

$j(document).ready(function(){
    for(st1 = 1; st1 <= 1000; st1++) {
        //filling options of select.opt1
        //works fine
    }

    $j("#shop-by-vehicle select.opt1").change(function() {
        $j("#shop-by-vehicle select.opt2").empty();
        $j("#shop-by-vehicle select.opt3").empty();
        for(st2 = 1; st2 <= 1000; st2++) {
            //used to fill options of select.opt2
        }
    });


    $j("#shop-by-vehicle select.opt2").change(function() {
        $j("#shop-by-vehicle select.opt3").empty();
        for(st3 = 1; st3 <= 10000; st3++) {
            //used to fill options of select.opt3
        }
    });


    $j("#shop-by-vehicle select.opt3").change(function() {
        // do something when select.opt3 options are clicked
    });
});

【讨论】：

【解决方案2】：

将on() 用于动态元素，因为您是removing 和adding options

使用

 $("#shop-by-vehicle select.opt2").on('click','option',function(){

代替

("#shop-by-vehicle select.opt2 option").click(function(){

喜欢，

;(function($){
    // you can use $ in place of $j now
    $(document).ready(function(){
        for(st1=1;st1<=1000;st1++)
        {
            //filling options of select.opt1
            //works fine
        }
        $("#shop-by-vehicle select.opt1 option").click(function()
        {

            $("#shop-by-vehicle select.opt2 option").remove();
            $("#shop-by-vehicle select.opt3 option").remove();
            for(st2=1;st2<=1000;st2++)
            {
                //used to fill options of select.opt2
            }

            // use on() for dynamic elements
            $("#shop-by-vehicle select.opt2").on('click','option',function(){
                $("#shop-by-vehicle select.opt3 option").remove();
                for(st3=1;st3<=10000;st3++)
                {
                     //used to fill options of select.opt3
                }
                // use on() for dynamic elements
                $("#shop-by-vehicle select.opt3").on('click','option',function()
                {
                    // do something when select.opt3 options are clicked
                });
            });
        });
    });//end jquery function
})(window.jQuery);// pass jQuery here

【讨论】：