Wenn ich eine Gruppe-Liste in bs3 aktualisieren verliere ich die glyphicon

Question

Hier ist mein html

<div class="list-group"> 
     <a href="#" id="lblChoice0" class="list-group-item">zero<i id="0" class="icon-volume-up icon-2x"></i></a> 
     <a href="#" id="lblChoice1" class="list-group-item">one<i id="1" class="icon-volume-up icon-2x"></i></a> 
     <a href="#" id="lblChoice2" class="list-group-item">two<i id="2" class="icon-volume-up icon-2x"></i></a> 
     <a href="#" id="lblChoice3" class="list-group-item">three<i id="3" class="icon-volume-up icon-2x"></i></a> 
     <a href="#" id="lblChoice4" class="list-group-item">four<i id="4" class="icon-volume-up icon-2x"></i></a> 
    </div> 

ich den Text der Gruppe-Liste mit einem js Ajax lesen aus meiner Datenbank zu ändern mit dem folgenden Code:

$('#lblChoice0').html(msg.d[0]); 
    $('#lblChoice1').html(msg.d[1]); 
    $('#lblChoice2').html(msg.d[2]); 
    $('#lblChoice3').html(msg.d[3]); 
    $('#lblChoice4').html(msg.d[4]); 

Wie erhalte ich die Glyphicons zu bleiben?

Answer 1

Versuchen Sie folgendes:

$('#lblChoice0').html(msg.d[0] + '<i id="0" class="icon-volume-up icon-2x"></i>'); $('#lblChoice1').html(msg.d[1] + '<i id="1" class="icon-volume-up icon-2x"></i>'); $('#lblChoice2').html(msg.d[2] + '<i id="2" class="icon-volume-up icon-2x"></i>'); $('#lblChoice3').html(msg.d[3] + '<i id="3" class="icon-volume-up icon-2x"></i>'); $('#lblChoice4').html(msg.d[4] + '<i id="4" class="icon-volume-up icon-2x"></i>');

OR (und dies ist wahrscheinlich besser):

Machen Sie Ihre HTML wie folgt aus:

<a href="#" id="lblChoice0" class="list-group-item"><span id="title_0">zero</span><i id="0" class="icon-volume-up icon-2x"></i></a>

dann in jQuery:

$('#title_0').html(msg.d[0]);

Offensichtlich das Gleiche für alle 5 Zeilen tun.

Answer 2

Dies geschieht, weil Sie den gesamten Inhalt Ihrer a ersetzen, die auch die Symbole enthält. Am einfachsten ist es, den Text in ein anderes Element zu packen und stattdessen den Inhalt dieses Elements zu ändern.

$(document).ready(function() { 
 
    $('#try').click(function() { 
 
    var msg = { 
 
     d: ['a', 'b', 'c', 'd', 'e'] 
 
    }; 
 
    $('#lblChoice0 span').html(msg.d[0]); 
 
    $('#lblChoice1 span').html(msg.d[1]); 
 
    $('#lblChoice2 span').html(msg.d[2]); 
 
    $('#lblChoice3 span').html(msg.d[3]); 
 
    $('#lblChoice4 span').html(msg.d[4]); 
 
    }); 
 
});

i { 
 
    display: inline-block; 
 
    width: 20px; 
 
    background-color: red; 
 
    height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="list-group"> 
 
    <a href="#" id="lblChoice0" class="list-group-item"><span>zero</span><i id="0" class="icon-volume-up icon-2x"></i></a> 
 
    <a href="#" id="lblChoice1" class="list-group-item"><span>one</span><i id="1" class="icon-volume-up icon-2x"></i></a> 
 
    <a href="#" id="lblChoice2" class="list-group-item"><span>two</span><i id="2" class="icon-volume-up icon-2x"></i></a> 
 
    <a href="#" id="lblChoice3" class="list-group-item"><span>three</span><i id="3" class="icon-volume-up icon-2x"></i></a> 
 
    <a href="#" id="lblChoice4" class="list-group-item"><span>four</span><i id="4" class="icon-volume-up icon-2x"></i></a> 
 
</div> 
 

 
<button id="try">Change</button>

Ich habe rote Kästen Ihre Symbole darzustellen.