Question

我正在使用this jQuery：

//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");
        $('#details').show().load('/members/details/'+detail_id);
        setupMeter();
        $('#reports-table').width(640);
});

问题是，jQuery css显示半秒钟（在加载详细信息div之后），然后恢复到样式表css ... 即来自链接的CSS！很抱歉不清楚！ 为什么！？

以下是“setupMeter”功能：

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

Answer 1

可能因为您点击链接而重新加载页面。将return false或e.preventDefault()放在click处理程序的末尾。

$("#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;
});

这可以解释为什么它只显示更新的样式只有一秒左右。

编辑：如果正在设置样式的元素位于#details元素内，则.load()内容将覆盖它们（及其新样式）。如果是这种情况，您应该将setupMeter作为回调。

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

Answer 2

我有这样的问题。我不知道它是否有用，但尝试将!important添加到CSS文件规则中。

詹姆斯

Answer 3

您的全局样式表可能会覆盖您的内联样式表设置。

试试这个：

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

Answer 4

试试这个：

//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;
});

Answer 5

我明白了！我需要在回调后运行后处理...

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

jQuery CSS没有应用

5 个答案: