Ich habe ein Drop-down in Javascript, aber es funktioniert gut in Chrom, aber nicht in Firefox

Question

div class = "Liste-Show" data-action = "Option-Tray"> -> Wenn auf Dropdown-Box angeklickt sollte es hinzufügen Anzeige als Block, aber es wird immer in Firefox versteckt. Aber es funktioniert gut in Chrom. Ich denke, es gibt ein Problem mit "$ (window) .click (function (e) { Basis. $ OptionTray.hide(); });" Code. Ich kann es nicht lösen.

// Dies ist die Typoskript-Datei, die auf Javascript kompiliert wird

private rootSelectionString: string = ".js-multiselectDropdown"; 
private actionButtonSelectionString: string = "*[data-action='colex']"; 
private optionTraySelectionString: string = "*[data-action='option-tray']"; 
private checkboxTraySelectionString: string = "*[data-action='checkbox-tray']"; 
private selectedClass= "selected"; 
private $rootElement: JQuery; 
private $optionTray: JQuery; 
private $checkboxTray: JQuery; 
private $actionButton: JQuery; 
private dataId; 
private listLength; 
private searchCheckedBoxes; 
private checkBoxes; 

constructor(el) { 
    var base = this; 
    base.$rootElement = $(el); 
    base.$optionTray = base.$rootElement.find(base.optionTraySelectionString).eq(0); 
    base.$checkboxTray = base.$rootElement.find(base.checkboxTraySelectionString).eq(0); 
    base.$actionButton = base.$rootElement.find(base.actionButtonSelectionString).eq(0); 
    base.optionPopulation(); 
    base.attachEvent(); 
    base.initialValueCapture(); 
} 

private attachEvent() { 
    var base = this; 
    if(base.$rootElement.length!==0) { 
     base.$optionTray.hide(); 
     base.$actionButton.click(function(){ 
      event.stopPropagation(); 
      base.$optionTray.toggle(); 
     }); 

     $(window).click(function(e) { 
      base.$optionTray.hide(); 
     }); 

     $(".list-show").click(function(event) { 
      event.stopPropagation(); 
     }); 

     base.$optionTray.find('li[data-id]').click(function() { 
      base.$actionButton.find('span').html(""); 
      $(this).toggleClass(base.selectedClass); 
      if($(this).hasClass(base.selectedClass)){ 
       base.$checkboxTray.find('[data-id="'+$(this).data('id')+'"]').attr('checked','1');     
      } 
      else { 
       base.$checkboxTray.find('[data-id="'+$(this).data('id')+'"]').removeAttr('checked'); 
      }  

      base.searchCheckedBoxes = base.$rootElement.find('input:checked').map(function() { 
      return $(this).val(); 
      }); 
      var dataArr=[]; 
      $.each(base.searchCheckedBoxes.get(),function(i,v) { 
       dataArr.push(v); 
      }); 
      if(dataArr.length!==0) { 
       base.$actionButton.find('span').append(dataArr+","); 
      } 
      else { 
       base.$actionButton.find('span').html("Choose Tag"); 
      }   
     }); 
    } 
} 

// Hier ist der HTML-Code, wo die Drop-Down-Menü

<div class="js-multiselectDropdown" style="float:left"> 
    <div class="action-btn " data-action="colex"><span>Choose Tag</span></div> 
    <div class="list-show" data-action="option-tray"> 
     <ul></ul> 
    </div> 

    <div data-action="checkbox-tray" class="hidden"> 
     <input type="checkbox" value="O"/>O</br> 
     <input type="checkbox" value="G" checked/>G</br> 
     <input type="checkbox" value="E"/>E</br> 
     <input type="checkbox" value="N" checked/>N</br> 
    </div>  
</div> 

Answer 1

angezeigt Es scheint, dass die unten Funktion nicht durch die Ereigniseigenschaft

base.$actionButton.click(function(){ 
    event.stopPropagation(); 
    base.$optionTray.toggle(); 
}); 

Scheint nicht, Ereignis auf dem fu zu nehmen nction(), Ich habe kein TypeScript-Compiler-Setup, aber wenn Sie nur ein Ereignis in die function() -Definition einfügen, sollten Sie gut gehen.