Événement jQuery click non déclenché sur IE

Question

Pour mon projet, j'utilise deux navigateurs IE (ver11) et chrome.

Je crée des boutons sur ma page et lie l'événement de clic à chaque bouton.

Voici le bouton que je crée sur l'interface utilisateur:

<table id="miniToolbar"> 
     <tbody> 
     <tr>    
      <td><button type="button" class="button_air-medium"><div id="showToolbar" class="miniToolbarContant showMenu"></div></button></td> 
      <td><div id="toolbarArea" class="toolbarArea" data-Owner="dera" data-Date="11/2016"> 
       <img id="toolbarTitle" width="15px" height="15px" src="../stdicons/threePoints.png"> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <button type="button" class="button_air-medium"><div id="showLayers" class="miniToolbarContant showLayers"></div></button> 
      </td> 
     </tr>          
     <tbody> 
    </table> 

Et voici les événements javascript bornés à chaque bouton:

$(function() { 
    $('#showToolbar').click(function(){ 
     $(this).toggleClass('rotate'); 
     $('#toolbarArea').toggle('slide'); 

     $(this).toggleClass('showMenu');    
     $(this).toggleClass('hideMenu'); 
    }); 

    $('#showLayers').click(function(){ 
     $(this).toggleClass('rotate');   
     hideLagend();   
     $('#InfoBand').toggle('slide');  

     $(this).toggleClass('hideLayers');   
     $(this).toggleClass('showLayers'); 
    });    
}); 

Lorsque j'utilise le chrome et je clique sur le bouton de la méthode appropriée est viré et ça marche parfaitement. Mais pendant que j'ouvre sur IE et que je clique sur le bouton, aucune méthode n'est déclenchée et je n'obtiens aucune erreur dans la console.

Une idée pourquoi la méthode ne se déclenche pas sur IE?

Answer 1

On dirait que l'événement connu .click ne s'enregistre pas correctement sur le problème IE.

Essayez d'utiliser .on("click"... plutôt que .click:

$(function() { 
    $('#showToolbar').on('click', function() { 
     $(this).toggleClass('rotate'); 
     $('#toolbarArea').toggle('slide'); 

     $(this).toggleClass('showMenu');    
     $(this).toggleClass('hideMenu'); 
    }); 

    $('#showLayers').on('click', function() { 
     $(this).toggleClass('rotate');   
     hideLagend();   
     $('#InfoBand').toggle('slide');  

     $(this).toggleClass('hideLayers');   
     $(this).toggleClass('showLayers'); 
    });    
});