Search code examples
javascriptjqueryinternet-explorer-11toggleclass

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


Works great in Firefox / Chrome / Microsoft Edge, but when the button is clicked in the latest Internet Explorer 11, it takes two clicks to toggle class when it should only take one. Everything else performs as it should (it plays and stops the music when it should).

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>

Solution

  • Since toggleClass normally works in IE I think the problem was just something to do with the way this code was written: Here is an IE one click working version in JS 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);
        }
    });