Изменение текста привязки в jQuery mobile без разрушения макета

Question

Как изменить текст привязки без разрушения макета? В этом случае, когда я запускаю функцию, макет полностью разрушен. Я хочу сохранить значок и изменить текст.

HTML:

<a href=# id="change">login</a> 
<footer id="footer" data-role="footer" data-position="fixed"> 
    <div id="nav" data-role="navbar"> 
    <ul> 
     <li><a href="#" data-icon="home" data-iconpos="bottom">Home</a></li> 
     <li><a href="#login" data-icon="gear" data-iconpos="bottom" data-transition="flip" class="ui-btn-active ui-state-persist">Login</a></li> 
     <li><a href="#info" data-icon="info" data-iconpos="bottom" data-transition="flip">Info</a></li> 
    </ul> 
    </div> 
</footer> 

JS:

$(function(){ 
    $("#change").click(function(){ 
    $("li:nth-child(2) a").text("Profile"); 
    }); 
}); 

Вот the jsFiddle link.

Спасибо!

Answer 1

вы пытаетесь заменить текст в a от link к profile, поэтому снимая всю разметку внутри. Вам нужно идти глубже.

Когда вы установили data-icon=somevalue, jQM устанавливает два элемента span внутри тега a, первый используется для текста, а другой для вашего значка. Если вам нужно изменить текст в одиночку, вы должны получить доступ к ".ui-btn-text" класса в a:

$("li:nth-child(2) a").find(".ui-btn-text").text("Profile"); 

Демо: http://jsfiddle.net/hungerpain/xuLS2/1/

Надеется, что это помогает! :)