CODEWITHSUNDEEP
jqueryaddclassremoveclass
StudioTime
StudioTime

Reputation: 23999

Changing classes on dynamic button

I use a service called crossrider which basically is an api for producing browser extensions.

To install the extension their JS generates a button which does not fit my site design and am trying to change it.

This is what it generates:

<div id="crossriderInstallButton">
    <a sl-processed="1" style="color:white;font-size:1em" class="crossrider_button crossrider_button_blue crossrider_button_medium" href="javascript://">Install Now</a>
</div>

I'm waiting for the page to load and then want to simply change classes but nothing happens.

Here's what I'm trying:

$( document ).ready(function() {
    $('.crossrider_button').removeClass('crossrider_button_blue crossrider_button_medium').addClass('btn btn-info');
});

UPDATE - RESOLVED

$(window).load(function(){ // <-- correct way to wait until page fully loaded
    $('.crossrider_button').removeClass('crossrider_button_blue crossrider_button_medium').addClass('btn btn-info');
});

Upvotes: 1

Views: 62

Answers (2)

Milind Anantwar
Milind Anantwar

Reputation: 82241

try writing the code in .load().It will Run a function when the page is fully loaded including graphics.

$( window ).load(function() {
  // Run code
});

Upvotes: 1

youser
youser

Reputation: 11

Maybe you need remove main class crossrider_button too, try

$( document ).ready(function() {
        $('.crossrider_button').removeClass('crossrider_button crossrider_button_blue crossrider_button_medium').addClass('btn btn-info');
});

Upvotes: 0

Related Questions