點擊處理程序不在鉻中工作，但在FF和IE中工作

這個magento中的jQuery代碼基本上是一個三步自動部件查找器，第一個用戶選擇製造年份，然後是製造公司，然後是型號以獲得汽車零件清單。該代碼只能在IE和Firefox上運行，但不適用於Chrome。我無法找到我的錯誤。展望未來一個解決方案點擊處理程序不在鉻中工作，但在FF和IE中工作

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

來源

2013-10-23 Rahul Gupta

does $ j = jQuery.noConflict（）;返回jQuery？ – Alex

另外，你有沒有嘗試用匿名封閉來封裝你的代碼，而不是使用noconflict？也許這就是問題 – Alex

不要將點擊事件綁定到選項。相反，將更改事件綁定到選擇 – billyonecan

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

來源

2013-10-23 12:57:57

使用動態元素，您是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

來源

2013-10-23 12:56:19

點擊處理程序不在鉻中工作，但在FF和IE中工作

回答

相關問題