Home/ Questions/Q 6845863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T00:33:10+00:00

My app (singe-page layout) receives data from the server and I want a nice

  • 0

My app (singe-page layout) receives data from the server and I want a nice button based navigation like:

<a data-role="button">Button X</a>
<a data-role="button">Button Y</a>

Quite straight forward. As the user is moving back and forth in the program I’d like to reuse my div so I call $('#fancyDiv').empty() before using append() to insert new buttons – according to the program state.

OK, but now we’re running into trouble. Only at the first call buttons are displayed correctly. When I move back, pick a another menu item and refresh the page (calling empty() and append()) there are no buttons any more but plain text.

Minimizing my code it, seems like jQuery doesn’t like to append HTML anchor tags.
Below you can find some HTML code to open in your web browser. When attaching the second text you can see the link is not colored but ignored and displayed as regular text.

I also tried the html() and text() methods leading to the same result so I’d appreciate any ideas.

<html>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

    <body>
        <a data-role="button" onclick="$('#text').empty();">Empty paragraph</a>
        <a data-role="button" onclick="$('#text').append('wawon Park is a park that is located in Daegu Dalseong-gun, South Korea. The people who mainly use the park are children. It is marked to park, <a>1981 March 10.</a>')">Attach new Text</a>

        <p id="text">Hod Stuart (1879-1907) was a <a>Canadian professional</a> ice hockey cover-point (now known as a defenceman) who played nine seasons for several teams in different leagues. He also played briefly for the Ottawa Rough Riders football team</p>

        <h3>Reference Text</h3>
        <p>wawon Park is a park that is located in Daegu Dalseong-gun, South Korea. The people who mainly use the park are children. It is marked to park, <a>1981 March 10.</a></p>
    </body>
</html>

* edit/update *

OK, Rory McCrossan made a very good proposal to manually add the ui-link class to the anchor element. That technically solved my question but taking it one step further a new problem arises. I’m note sure whether to open a new question for this:

As mentioned I’d like to use buttons for the navigation and just adding ui-link class to them is not enough. I examined this fiddle with firebug and it seems some kinda initiating method is missing.
This is the code for the working button:

<a class="ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow" data-role="button" data-theme="c">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text">1981 March 10.</span>
</span>
</a>

and here we go for the appended button:

<a class="ui-link" data-role="button">1981 March 10.</a>

OK, quick and dirty I can just copy the code and set up all spans by my own but that sounds…. wrong and will break as soon as there’s some change in jQuery’s structure.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code is working fine. The A tag is being appended, however it is just not being styled in any way. If you add the class ui-link to the A tag it appears the same as the others. I assume this class is being added on load by the jquery-mobile script you have included.

    See this fiddle for an example.

    Note, I’ve also moved the processing code for each button to it’s own click handler to give you much neater code.

    • 0