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

370
November 22, 2016, at 11:20 AM

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

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);
    }
}); 
Rent Charter Buses Company
READ ALSO
Toggle (or slide) out specific div on click and hide others

Toggle (or slide) out specific div on click and hide others

I've been browsing all day trying to find and answer to my problem. I'm stumped now and been running into walls.

332
How to add bootstrap calendar to #gvnix finder?

How to add bootstrap calendar to #gvnix finder?

How to add bootstrap calendar to gvnix finder?[nnn]I'm researching the tags generated by gvnix and found in this tag: [nnn]jquery/form/create. tagx[nnn]this code.

503
Page reload after ajax request for delete

Page reload after ajax request for delete

I have a webpage which displays all the records of a table with a checkbox infront of them. I can select the boxes and then make a ajax request for deleting them.

485
Non-Bootstrap Collapsible Navbar

Non-Bootstrap Collapsible Navbar

I'm trying to set-up my code so that when I click a link with the id of "#toggleNav".

315