jQuery 的切换 class 需要在 Internet Explorer 中单击两次？

Question

在 Firefox/Chrome/Microsoft Edge 中运行良好，但在最新的 Internet Explorer 11 中单击按钮时，需要单击两次才能切换 class，而实际上只需单击一次。其他一切都按应有的方式运行（它在应该播放和停止音乐时）。

JSFiddle Example

<script>
$(".play").on('click', function () {
    var key = $(this).attr('key');
    EvalSound(this, key);
    var this_play = $(this);
    $(".play").each(function () {
        if ($(this)[0] != this_play[0]) {
            $(this).removeClass("pause");
        }
    });
    $(this).toggleClass("pause");
});

var thissound = new Audio();
var currentKey;

function EvalSound(el, key) {
    thissound.addEventListener('ended', function () {
        // done playing
        $(el).removeClass("pause");
    });

    if (currentKey !== key) thissound.src = "exclusive/" + key + ".mp3";
    currentKey = key;

    if (thissound.paused) thissound.play();
    else thissound.pause();
    thissound.currentTime = 0;
    currentPlayer = thissound;
}
</script>

Answer 1

由于 toggleClass 通常在 IE 中工作，我认为问题只是与这段代码的编写方式有关：这是 JS 中的 IE 一键式工作版本 Fiddle：http://jsfiddle.net/jeffd/2fjnmdkb/22/

$(".play").on('click', function () {
     var key = $(this).attr('key');
     var this_play = $(this);
     $(".play").each(function () {
         if ($(this)[0] != this_play[0]) {
             $(this).removeClass("pause");
         }
     });
     $(this).toggleClass("pause");
     var player_bottom = $(".playerbottom");
     if (currentKey == key || !player_bottom.hasClass('pausebottom')) {
         player_bottom.toggleClass("pausebottom");
     }
     EvalSound(this, key);
 });
 var thissound = new Audio();
 var currentKey;
 function EvalSound(el, key) {
     thissound.addEventListener('ended', function () {
         // done playing
         $(el).removeClass("pause");
         $(".playerbottom").removeClass("pausebottom");
     });
     if (currentKey !== key) thissound.src = "http://99centbeats.com/1e4cb5f584d055a0992385c1b2155786/" + key + ".mp3";
     currentKey = key;
     if (thissound.paused) thissound.play();
     else thissound.pause();
     //thissound.currentTime = 0;
     currentPlayer = thissound;
 }
$(".volume_slider").slider({
    value  : 75,
    step   : 1,
    range  : 'min',
    min    : 0,
    max    : 100,
    slide  : function(){
        var value = $(".volume_slider").slider("value");
        thissound.volume = (value / 100);
    }
});

jQuery 的切换 class 需要在 Internet Explorer 中单击两次？

jQuery's toggle class requires two clicks in Internet Explorer?

javascript

jquery

toggleclass

internet-explorer-11