jQuery .append() not working in IE, Safari, and Chrome

Question

So I'm using jQuery's AJAX function to read some XML for me and it's worked just fine. But now I'm trying to manipulate the display property of 4 different dynamically generated divs when mouseup is triggered from option items. The size and x/y of the divs are determined by the XML and are parsed through.

My problem lies in the fact that these divs either aren't being generated or just don't show up in IE, Safari, and Chrome. In Firefox and Opera, they do work. I'm using jQuery's .append() to create the divs and then the .css() function to manipulate them. Looking in Chrome's developer tools, I am seeing that the css property being changed in the script is being overridden by the property in the stylesheet. Any fixes?

Divs created here:

    case "dynamic":
     var n = name;
     switch(portion){
      case "stub":
      $('.ticket').append("<div class='stubEditable' id='"+n+"' title='stub'></div>");
      break;
      case "body":
      $('.ticket').append("<div class='bodyEditable' id='"+n+"' title='body'></div>");
      break;
     }
    break;
    case "static":
     var n = name;
     switch(portion){
      case "stub":
      $('.ticket').append("<div class='stubEditable' id='"+n+"' title='stub'></div>");
      break;
      case "body":
      $('.ticket').append("<div class='bodyEditable' id='"+n+"' title='body'></div>");
      break;
     }
    break;

Mouseup functions that change the display property:

$('#StubTemplates').find('.ddindent').mouseup(function(){
    var tVal = $(this).val();
    var tTitle = $(this).attr('title');
    if(!stubActive){
     $('.stubEditable').css('display', 'none');
     $('#'+tVal).css('display', 'block');
     stubActive = true;
    }else{
     $('.stubEditable').css('display', 'none');
     $('#'+tVal).css('display', 'block');
     stubActive = false;
    }
   });
   $('#StubTemplates').find('#stubTempNone').mouseup(function(){
    $('.stubEditable').css('display', 'none');
   });
   $('#BodyTemplates').find('.ddindent').mouseup(function(){
    var tVal = $(this).val();
    var tTitle = $(this).attr('title');
    if(!bodyActive){
     $('.bodyEditable').css('display', 'none');
     $('#'+tVal).css('display', 'block');
     bodyActive = true;
    }else{
     $('.bodyEditable').css('display', 'none');
     $('#'+tVal).css('display', 'block');
     bodyActive = false;
    }
   });
   $('#BodyTemplates').find('#bodyTempNone').mouseup(function(){
    $('.bodyEditable').css('display', 'none');
   });

Answer 1

Since you can see in dev tools that the style is correctly added to the element, the issue is not so much about JQuery as it is about the cascade of CSS. Normally, anything added directly to the element like this should get precedence, but there are exceptions. CSS specificity can cause some confusing behavior. Do you have an !important somewhere getting in the way?

Also, since you are hiding and showing with display:block and display:none, make sure you do not have a visibility:hidden in CSS which will override.

Also, any reason why you are not just using .show() and .hide() or .toggle()? You could also try removing classes that are getting in the way and setting others using .removeClass(), .addClass(), or .toggleClass().

If all else fails you can always try $('.bodyEditable').css('display', 'none !important');.

I try to avoid !important since it causes so many headaches...but it is in the spec for a reason.

Answer 2

So I managed to fix the problem. The options in the select menu weren't calling the mouseup, so I used a .change() function on the select menu while using a :selected selector to find what was selected.

Big thanks to Bradley for putting me on the right track.