Ajax Javascript 不会更改我的 CSS 而无需刷新页面

Question

I am changing my CSS styling using JavaScript code but it doesn't work when my search filter finds that element; the style effect doesn't change until I refresh the page. Here is my code, it works perfectly when I refresh the page, but doesn't work dynamically without reloading the page.

jQuery(function($) {
  $( ".card-auto-label:contains('Ny')" ).css( "background", "#5dd018" );
  $( ".card-auto-label:contains('Solgt')" ).css( "background", "red" );
  $( ".card__label:contains('Ny')" ).css( "background", "#5dd018" , "!important");
});

Answer 1

Your code only runs once, and it does not add CSS to the page globally, it adds it to the exact elements specified that already exist on the page.

Unlike using a <style> tag or a css file, applying styles with the jQuery css() function adds them on to the specific elements you target as inline css.

For example, $(".someclass").css("mystyles")

Has a result that looks like this: <div class="someclass" style="mystyle"></div>

This isn't the same as a css style globally in your page that looks like this:

.someclass{ mystyle }

In the first example, your style is applied ONLY to the element that you assigned it to with jQuery. If you add another element to the page with the exact same class and attributes, it will not inherit the style. There is nothing in the page telling it to be styled that way.

In the second example, the style is globally applied to every element with class someclass . It doesn't matter when the element is added to the page, onload or dynamically created later, the browser will apply it to any instance of someclass that it seems in the DOM.

Since you are relying on a jQuery function to determine where to put the styles, and that function cannot be replicated with css alone, I can see why the second example won't work for you. So to fix this issue, you need to have a function that triggers when your AJAX call finishes loading. I assume you are already doing something with the data from the AJAX call to add it to your page? Add the javascript code inside that function AFTER the content is added to the page and they will be updated with the styles. The way you have it written now, it is just firing once on page load.

Answer 2

From the code you provided it seems that you are only applying the styling when you load the page. If you then later add more elements you want to style to the page they will not have the styling applied.

This is because when you write

$( ".card-auto-label:contains('Ny')" ).css( "background", "#5dd018" );

it writes the style into the elements HTML style property like so

<div style="background: #5dd018">Ny</div>

making it only apply to that element. That's also why it works when you reload the page, because now the elements are on the page when your code runs, and the styling gets applied.

You need to put your code in a function

function applyStyling() {
  $( ".card-auto-label:contains('Ny')" ).css( "background", "#5dd018" );
  $( ".card-auto-label:contains('Solgt')" ).css( "background", "red" );
  $( ".card__label:contains('Ny')" ).css( "background", "#5dd018" , "!important");
}

and then call that function every time after you add new elements to the page.

A better solution would be to put the styles in a CSS class and then add that class to the HTML elements you want to add the styling to.

.Solgt {
  background: red;
}

.Ny {
  background: #5dd018;
}

function applyStyling() {
  $( ".card-auto-label:contains('Ny')" ).addClass('Ny');
  $( ".card-auto-label:contains('Solgt')" ).addClass('Solgt');
  $( ".card__label:contains('Ny')" ).addClass('Ny');
}