Question

I am having a weird issue with IE9 crashing whenever a click event occurs. I thought it was the clone function maybe a bug with it so tried removing it but same issue. It is working in all browsers even IE7 and 8 but 9 just constantly crashes and not sure.

    <div class="icons">
        <span class="attMessage"></span>
        <span class="successMessage"></span>
        <span class="errorMessage"></span>
    </div>

    <div class="newSection">
        <h3>Add/Update Adjuster License</h3>
        <p>(this is where i am appending an icon from above)</p>
        <p><a title="Add license to queue" class="addLicense"></a></p>  
    </div>

_

    $('.addLicense').click(function () {
      var parent = $(this).parent();
      var license = $('.licenseOverview');
      var dropdown = $('#MainContent_ddlLicenseStates').val();
      var number = $('#MainContent_txtLicenseNumber').val();
      if (number != '') {            
        notifier(parent, "License Added To Queue", "Success");
        $('#MainContent_txtLicenseNumber').val('');
      }
      else {
        notifier(parent, "Must Enter A License Number", "Failure");
      }
    });

    function notifier(oAppend, oMessage, oMessageType) {
      var iconDiv = $('.icons');
      if (oMessageType == 'Success') {
      $('.icons > .successMessage').clone().html(oMessage).appendTo(oAppend).delay(100).fadeIn('slow').delay(500).fadeOut();
      //tried a different way since i thought clone was crashing ie9        
      //$('.icons > .successMessage').html(oMessage).appendTo(oAppend).delay(100).fadeIn('slow').delay(500).fadeOut();
      setTimeout(function () {    oAppend.find('.successMessage').remove().appendTo(iconDiv); }, 2500);
      }
      else if (oMessageType == 'Failure') {
      $('.icons > .errorMessage').clone().html(oMessage).appendTo(oAppend).delay(100).fadeIn('slow').delay(500).fadeOut();
      setTimeout(function () { oAppend.find('.errorMessage').remove() }, 2500);

      }
      else if (oMessageType == 'Warning') {
      $('.icons > .attMessage').clone().html(oMessage).appendTo(oAppend).delay(100).fadeIn('slow').delay(500).fadeOut();
      setTimeout(function () { oAppend.find('.attMessage').remove() }, 2500);

      }
    }

Answer 1

It looks like it was the fadeIn().delay(500).fadeOut() was culprit. As soon as the the fadeOut occured IE9 crashed. I removed fadeOut and no crashes occured. Instead of using a delay i used a timeout function to handle the fadeOut and no more crashing.

    $('.icons > .successMessage').clone().html(oMessage).appendTo(oAppend).delay(100).fadeIn('slow');
    setTimeout(function () { oAppend.find('.successMessage').fadeOut().remove(); }, 2500);