Home/ Questions/Q 790417
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T21:40:41+00:00

So I’m using jQuery’s AJAX function to read some XML for me and it’s

  • 0

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');
   });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0