jQuery CSS not applying

I'm using this jQuery with this:

//Table select
$("#reports-table tr").click(
    function(e) {
        if($(e.target).is(".row-button-small")) return;

        var detail_id = $(this).attr('id');
        $(this).addClass("selected");
        $(this).siblings().removeClass("selected");
        $('#detail开发者_高级运维s').show().load('/members/details/'+detail_id);
        setupMeter();
        $('#reports-table').width(640);
});

The problem is, the jQuery css shows for half a second (right after load of the details div), and then reverts to the stylesheet css... That is, the CSS from the link! Sorry to be unclear! Why!?

Here is the "setupMeter" function:

function setupMeter() {
   var oMeter = $('.meter');
   var percent = 100 * (oMeter.width() / oMeter.closest('.meter-bg').width());

   if (percent < 33) {
       oMeter.css('background-color', 'green');
   }
   else if (percent > 33 && percent <= 66) {
       oMeter.css('background-color', 'orange');
   }
   else {
       oMeter.css('background-color', 'red');
   }
}

I had a problem like this. I don't know if it will help, but try adding !important to the CSS file rules.

James

Your global stylesheet might be overriding your inline stylesheet setting.

Try this:

$("#reports-table').css("width", "640px !important");

try this:

//Table select
$("#reports-table tr").click( function(e) {

        if($(e.target).is(".row-button-small")) return;

        ev.stopPropagation();

        var detail_id = $(this).attr('id');
        $(this).addClass("selected");
        $(this).siblings().removeClass("selected");
        $('#details').show().load('/members/details/'+detail_id, function() {
          setupMeter();
          $('#reports-table').width(640);
        });

        return false;
});

I got it! I needed to run the post-processing after the callback...

        $('#details').load('/members/details/'+detail_id,function(){
            $(this).show();
            $('.meter').setupMeter();
        });

Likely that your page is reloading because you're clicking on a link. Place return false or e.preventDefault() at the end of the click handler.

$("#reports-table tr").click(
    function(e) {
         // prevent the default behavior of a link
        e.preventDefault();

        if($(e.target).is(".row-button-small")) return;

        var detail_id = $(this).attr('id');
        $(this).addClass("selected");
        $(this).siblings().removeClass("selected");
        $('#details').show().load('/members/details/'+detail_id);
        setupMeter();
        $('#reports-table').width(640);

         // prevent the default behavior of a link
        return false;
});

This would explain why it shows the updated style for only a second or so.

EDIT: If the elements being styled are inside the #details element, they (and their new styles) will be overwritten by the .load() content. If that's the case, you should your setupMeter as a callback.

    $('#details').show().load('/members/details/'+detail_id, setupMeter);