Question

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 CODE

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

Answer 1

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

Answer 2

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

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

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

2 个答案: