CODEWITHSUNDEEP
jqueryhtml
user889030
user889030

Reputation: 4754

add class to span inside a button tag in jquery

I'm trying to add class to span inside a button tag.

So initially I have a submit button something like this: 

<button type="submit" id="sbtn" name="submit" class="btn btn-lg btn-warning"><span id="sid"></span> Submit</button>

next I have a click function which I tried different ways to add class to span with it but none of them worked, I have commented those are not working:

    $("#sbtn").click(function(e) { 
            $(this).html(' Loading ...');
        //  $(this).find('span').addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
        //  $(".btn.btn-lg.btn-warning>span").addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
       // $("#sid").addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
       // $("button.btn.btn-lg.btn-warning span").addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');

    });

Any idea how to add class so that I get below?

<button type="submit" id="sbtn" name="submit" class="btn btn-lg btn-warning"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading ...</button>

Upvotes: 1

Views: 4063

Answers (5)

Jai
Jai

Reputation: 74738

Use this: 

$("#sbtn").click(function(e) {
  var spn = $(this).find('span').clone();
  spn.addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
  $(this).html(spn + ' Loading ...');
});

Upvotes: 0

Gilson Gilbert
Gilson Gilbert

Reputation: 99

Please try the following with your code. It may work for you

View in jsFiddle : https://jsfiddle.net/fz2hq3gk/

In HTML:

<button type="submit" id="sbtn" name="submit" class="btn btn-lg btn-warning"><span id="sid"></span> <p id="chnagetext">Submit</p></button>

In Script:

    $("#sbtn").click(function(e) { 
            $("#chnagetext").html(' Loading ...');
$(this).find('span').addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
$(".btn.btn-lg.btn-warning>span").addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
$("#sid").addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
$("button.btn.btn-lg.btn-warning span").addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');

    });

Upvotes: 1

Rahul Patel
Rahul Patel

Reputation: 5246

Because of your code $(this).html(' Loading ...'); both span and text of button tag are being replaced by "Loading.."

So using $(this).get(0).lastChild.nodeValue = 'Loading ...'; code only text part of button tag will be replaced and using $(this).find('span').addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate'); code classes in the span will be added.

Please check below working snippet.

$("#sbtn").click(function(e) { 
  $(this).get(0).lastChild.nodeValue = 'Loading ...';
  $(this).find('span').addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="sbtn" name="submit" class="btn btn-lg btn-warning"><span id="sid"></span> Submit</button>

Upvotes: 0

Mihai T
Mihai T

Reputation: 17687

the problem is that by using

$(this).html('Loading ...'); you delete the span from inside the button, and so...trying to find it and give it a class is useless because it doesn't exist anymore because you change the html of the button

so there are a few solutions for this

1. adding also the spaninside the html()

$("#sbtn").click(function(e) { 
            $(this).html(' <span></span>Loading ...');
       $(this).find('span').addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
      
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="sbtn" name="submit" class="btn btn-lg btn-warning">
<span id="sid"></span> Submit</button>

2 . you could add the span together with it's classes and not use addClass . but this is a messy solution

$("#sbtn").click(function(e) { 
            $(this).html('<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>Loading ...');

      
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="sbtn" name="submit" class="btn btn-lg btn-warning">
<span id="sid"></span> Submit</button>

Upvotes: 4

ScanQR
ScanQR

Reputation: 3820

You need to find the span with given id sid within the button as follows,

$("#sbtn").click(function(e) { 
   //add all relevant classes to this span
   $(this).find('span#sid').addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');

}

Upvotes: 0

Related Questions