IE上没有触发jQuery点击事件

时间:2017-08-27 07:17:47

标签: javascript jquery internet-explorer

对于我的项目,我使用两个浏览器IE(ver11)和chrome。

我在页面上创建按钮并将click事件绑定到每个按钮。

这是我在UI上创建的按钮:

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

以下是每个按钮的javascript事件:

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

当我使用chrome并点击按钮时,会触发相应的方法并且它完美无缺。 但是当我在IE上打开并点击按钮时,没有方法被触发,我也没有在控制台中出现任何错误。

知道为什么方法不会在IE上触发吗?

1 个答案:

答案 0 :(得分:1)

似乎已知的.click事件未在IE问题上正确注册。

尝试使用.on("click"...而不是.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');
    });             
});