クラスをjqueryのボタンタグの内側に追加する

Question

ボタンタグ内にスパンするクラスを追加しようとしています。

だから、最初は私がsubmitボタンにこのようなものがあります：私は、私はそれにまたがるようにクラスを追加するさまざまな方法を試してみましたが、それらのどれも働いていないクリック機能を持って次の

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

を、私はそれらをコメントしていますは動作していません：

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

    }); 

私が下になるようにクラスを追加する方法はありますか？あなたは次のようにbutton以内に指定されたid sidとspanを見つける必要がある

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

Answer 1

問題が

$(this).html('Loading ...');を使用することにより、ボタンの内側からスパンを削除することで、それで、ボタンのhtmlを変更するので、それがもう存在しないので、それを見つけようとクラスに与えることは役に立たないです

はそうも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>

内部spanを追加この

ためのいくつかの解決策が存在します。あなたはクラスと一緒にスパンを追加することができ、addClassは使用しません。これは、両方のスパンとボタンのタグのテキストが置き換えられているため、コードの$(this).html(' Loading ...');厄介なソリューション

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

Answer 2

、

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

} 

Answer 3

である「ロード..」

ので、テキストのみ$(this).get(0).lastChild.nodeValue = 'Loading ...';コードを使用して、ボタンタグの一部が置き換えられ、$(this).find('span').addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');スパン内のコードクラスが使用されます。

以下の作業スニペットを確認してください。

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

Answer 4

使用この：

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

Answer 5

あなたのコードで以下のことを試してみてください。それはjsFiddleであなたのために

ビューを働く可能性があります

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

スクリプト内：HTMLでhttps://jsfiddle.net/fz2hq3gk/

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

    });